I'm having issue with my drop-down menus on both windows and mac versions of chrome. I tried some fixes out there but I can't figure it out.
Any advice would be great! I think there is a z-index issue, but I can't figure out where it is.
Here is the temp site location: http://eyedialabs.ca/oaktreenew/about/
It's because an overflow. I realised this because if you gave the drop down top:-50px; we could see it, and given that the z-index you have given it is ridiculously high it was going to be the topmost element.
So, after much scouring, I found that it's header-container's overflow:hidden. Removing this attribute, fixes the problem.
Related
This bug is appearing only in Safari on Mac OS and only with the current set up in our application. Initially I though it was a z-index issue, since some elements disappeared after updating that value.
Although there's a last element that has no z-index value and it's always displayed on top of the full-screen video.
--see screenshot below--
I have tried removing all styling from the bar you see on the screen and it would still appear on top of the video.
--see screenshot below--
As you can see the elements within the bar are still visible.
I haven't been able to reproduce the issue on codepen.io or jsfiddle and nothing is currently available in Stackoverflow or GitHub.
SOLUTION:
removing will-change property from the container solved the issue.
DESCRIPTION
The problem that caused this issue was the property will-change set to one of the containers of this video element.
The structure of the application is quite complex so I am not going to post the whole code here. Although by moving around the video element in the inspector and testing the full-screen functionality every time, I narrow down the problem to one div container that had this property.
If you guys find out the exact reason why the default full-screen functionality of safari broke down because of the will-change property, post a comment or an answer since it will be very appreciated.
I had a similar issue with my application. Web elements were overlapping fullscreen videos. Only effected Safari on Mac OS. I also assumed it was a z-index issue specific to Safari and initially tried modifying z-index when fullscreen mode was detected. Thanks to Guilio G.'s comment above the issue was resolved by removing the -webkit-backdrop-filter:blur(3px); of a parent <div>.
Like Guilio G., I don't yet know why, but this -webkit declaration was causing the issue and removing it resolved the problem.
In my case, this issue was being caused by isolation: isolate on an ancestor element. Removing this property fixed the issue.
Hopefully Safari fixes this, since isolation is a wonderful property that solves a bunch of stacking context issues.
I am currently having an issue in chrome with a webpage I am working on. When the page loads, there is an odd space after an inline element.
Usually this would be caused by a margin, or some padding. What is peculiar about this issue though is that it isn't. If I disable a CSS rule then re-enable it, it fixes the issue.
The issue doesn't happen in Firefox, so as far as I know it is chrome specific.
Any help or suggestions would be greatly appreciated.
Screenshot of said issue: http://imgur.com/pIjeXnV,UEPWRiB#0
I've solved this issue by having javascript change the css after a short delay and change it back. This emulates the solution that I mentioned viewing through using the inspector.
Since this is more of a work around than a solution, if anyone has any more information about the issue, feel free to comment.
Thanks.
I've spent close to two days trying to solve a z-index/stacking problem in IE7 and I've admitted defeat and I'm hoping one of you geniuses can help me out!
If you go to http://learningseat.wpdemo.com.au/discover/#links in IE7 and click on What We Stand For or Where We're Going you will see that the Who We Work With and Who We Are links show on top of my lightbox.
I've tried to solve this issue by moving things around, adding position: relative and z-indexes to different elements but I've had no success with this at all.
I even tried using some of the jQuery tricks for z-index issues with IE but I've had no luck.
I've worked with another developer on this project and the code isn't too pretty but if anyone could help me with this problem I'd be forever grateful!
Thanks for your ideas and help!
In this StackOverflow answer, Tgr gives a pretty good explanation of how z-index is supposed to work and how IE 7 and earlier get it wrong.
What worked for me in my limited tinkering was the solution presented in the last paragraph of that answer. First I removed the IE7-specific z-index values in your stylesheet, then I added a very high z-index value (9999) to the .buttoninfo that was clicked on. In your code, you can add a class when the button is clicked, then remove it when popup is hidden.
This seems to be a bug specific to firefox (version 7.0.1), I have copied the offending code into jsFiddle.
but jsFiddle DOES NOT REPRODUCE THE BUG. copy the code from jsFiddle into a blank html document and test it locally to see the issue.
http://jsfiddle.net/kCMeu/1/
This is the normal state of the menu items before you over over any of them:
This is the first sub_item when hovered over wiht the mouse:
And the third sub_item:
And now the last:
Where did that white margin come from around the #global_nav_box div? it only shows up on the hover state of the last sub item.
That is the bug I cant (conveniently) fix.
Fixes I've found are:
Setting the body tag 'margin-top:0px' - but that leave an unsightly margin on the left and right of the page.
Removing the 'z-index' property from the CSS for #global_nav_box - I thought i'd fixed it, until all the content on the page below scrolled over the div when you scroll on the page.
So why does it do this? Can you replicate this on Firefox? How can I fix it?
Thanks in advance.
Update: Ive had some of my friends test it and it (the bug) shows up for some and not for others, I have also tested in in Windows XP mode and it (the bug) still doesn't show up. All my testers were running Windows 7 and Firefox 7.0.1.
I've disabled all plugins and extensions on my install of Firefox and its still there. Insane.
Although I do not know what caused this issue I have found a clean solution for it :)
Could you not wrap the absolute positioned div in a fixed div like this: http://jsfiddle.net/HelloJoe/JXWNj
Source: HelloJoe
His solution from the previous thread that was the cause for this one fixed everything. :)
On this page in Internet Explorer 6 and 7 on XP and Vista there is a bug where scrolling the page seems to lose bits of the left and right borders. Has anyone seen this behaviour before, and does anyone have any ideas to avoid it?
Edit: This is fixed now. If anyone would like to see what the problem was, find the following line and disable it in Firebug:
zoom:1; /*for hasLayout*/
You can often deal with this bug by applying position:relative to the elements in question. height:1% can also help. Another typical "black-magic" solution to dealing with IE6 and has to do with hasLayout. See http://www.satzansatz.de/cssd/onhavinglayout.html for more information.
If giving it hasLayout doesn't solve your particular issue, then you will definitely want to make sure that there is no contained element with a background of #fff that is expanding past the bounds of the containing element (likely due to IE6's way of handling padding and width).