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.
Related
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.
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. :)
I have a google map built from the Google Maps API v.3 on a website that I am building. It works fine in all browsers. However, in Safari (for the Mac at least) it is affecting other elements in an odd way. It seems to really only apply to absolutely positioned elements and it may have something to do with z-index. Has anyone had any experience with something like this? What did your solution end up being? Sorry I cannot post a URL yet.
Thanks!!
I ended up finding the solution to my problem. It did indeed have to do with z-index. Interesting that it was only happening in Safari, though. Regardless, if anyone else is noticing something odd going on with Safari and google maps it may have something to do with the z-index of an element on your page. That's where I would start. Thanks again!
The solution that worked for me here (as -webkit-transform:none; stops maps and other functions working on a page), was to ajax in the content via jQuery after load.
Hope that helps!
I'm not completely certain what's going on there since you aren't able to post a sample URL, but if nothing is working after you've tried everything, you can report the issue to the Google Maps API team and they can more thoroughly investigate to see what the issue is.
This is indeed a bug, and is not specifically on Google's end, it has to do with z-indexing getting messed up, whenever you use webkit, or so it seems.
There are two fixes for this, hopefully one of them works.
1. This is the preferred fix. Remove the webkit-transform from the DOM element that you load google maps into and set it's z-index to "auto". Also set it's child div to a z-index of "auto". You can do this with CSS like the following:
#googleMap{
-webkit-transform: none !important;
z-index: auto !important;
> div{
z-index: auto !important;
}
2. Remove the z-index value for every absolutely positioned element on your page that has one (apart from the Google Maps z-indexes), i.e. set z-index for all absolute positioned elements to z-index: auto.
I had experienced the exact same problem as described by the thread starter. In my case the whole navigation disappeared (navigation wrappers seems to be a popular div to mess with in this case, after some research). When I rid the Google Map div from the site the navigation showed up like it should.
Anyway, my solution was to add a direct style to my Google map div:
<div id="map" style="-webkit-transform: none; z-index: 10;"></div>
And that solved my case. Hope it might help someone out there!
Removing the translate globally broke other functionality in our app. It did however point us in the right direction.
This solution worked for us. We moved all the map pin elements back up to the 103 layer.
div[id*='marker_div_']{
-webkit-transform: translateZ(103px);
}
I experienced this same problem in Safari. In my safari it was causing my font on the affected div to become very thin and undefined. The cause I found was that the affected div was casting a shadow onto the div containing google maps. If I remove the drop show the issue is resolved.
I have an ASP.NET application that renders a 3rd party (Telerik's) menu control under
another control (RadDock) when the menu expands.
This artifact ONLY happens in IE7. Not in Safari/FF/Opera/Chrome (Have I left any out?)
The menu control needs to be rendered OVER the other control.
I have Google'd this a fair amount, but have yet to find a simple solution to fix it for IE7.
What is the easiest to solve this problem for IE?
Also do you know if this z-index problem has been resolved in the (pending?) IE8?
This Q is not meant to start a browser flame war. Please only respond if you have a
relevant comment.
Thank you kindly.
I don't know if this is similar or not, but I had an issue with z-indexing where when the z-index was applied to the elements of a container, but not to the container itself, the z-index wasn't being properly applied to the child elements. This manifested itself as background borders appearing over the top of the menu items that should have been on top. I solved the issue by applying the same z-index to the container holding the menu items. I don't know how the Telerik controls set up their CSS, but you may want to check that the class being assigned to the container has an appropriate z-index as well as the menu items themselves.
I've had some problems like that before, although not with the 3rd party controls you mentioned. Check to see if either of the controls sets it's own z-index conditionally if the browser is IE. If that's not the case, try setting a specific z-index for each of the controls (or their containers) to make sure IE doesn't fall back to some sort of default unknown z-index.
If the z-index changes do not fix it, it may actually be a positioning problem rather than a z-index problem. Positioning problems are quite common (from my own experience) when you try to do cross-browser compatibility.
I have a div and an iframe on the page
the div has
z-index: 0;
the iframe has its content with a popup having a z-index of 1000
z-index: 1000;
However, the div still overshadows the popup in IE (but works fine in Firefox).
Does anyone know what I can do?
Explorer Z-index bug
In general, http://www.quirksmode.org/ is an excellent reference for this sort of thing.
Which version of IE?
I'm no javascript guru, but I think hiding the div when the popup pops might accomplish what you need.
I've had to work with divs and iframes when creating a javascript menu that should show overtop dropdown boxes and listboxes -- other menu implementations just hide these items whose default behavior in IE6 is to show on top of any DIV, no matter the z-index.
I face the same problem. The problem in my case is that the content in the iframe is not controlled by IE directly, but by Acrobat as it is a pdf file. You can try to show the iframe without the content, in which case the popup displays normally. For some reason IE is not able to control the z-index for external helpers.
It was tested with IE7
Without seeing your code, it's difficult to determine the problem. But it's worth noting that z-index only works when the element has been positioned (e.g. position: absolute;), so perhaps that could be an issue?
There's a good article on CSS Z-index from the Mozilla Developer Center.
Without seeing a code snippet, it's hard to determine what the issue is. You may want to try appending an iframe under your popup that is the same size as your popup. With IE7 if you render the iframed popup after the other iframe has already loaded you should be able to cover up elements that are beneath. I believe some JS calendars and some lightbox/thickbox code does this if you are looking for examples.
never set your z-index to anything bellow 1 enless you want to hide it. I'm not sure about 7.0 but older versions of IE I've had issues with doing that. IE doesn't like z-index that much. Also check your positioning. Positioning may be your issue. sorry, i don't have enough info to help you further.