Mobile safari position:fixed z-index glitch when scrolling
Solution 1
z-index is not reliable with position:fixed, as shown in this fiddle: http://jsfiddle.net/mZMkE/2/ use translateZ transformation instead.
transform:translateZ(1px);
on your page elements.
EDIT: In your code, Add this css:
.bla, .projects, .contact {
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
}
and then remove z-index refs from those elements and .intro.
Solution 2
Update 1: I added
transform:translateZ(x)
in addition to thez-index
and it did not fix the problem.Update 2: I added
-webkit-
prefix and this DOES fix the z-index problem on mobile Safari, but also causes theposition:fixed
to work incorrectly in desktop Chrome. "
Then try to wrap -webkit-transform:translateZ(x)
in a mobile specific media query.
For example:
@media only screen and (min-device-width : ... ) and (max-device-width : ... ) {
.whatever {
-webkit-transform: translateZ(x)
}
}
So in this case it won't do anything on desktop Chrome
Solution 3
I tried the solution accepted as an answer in a specific case when I needed to set different position in the stack of different layers, but that alone didn't work both in desktop browsers (firefox and chrome) and Safari iOS
I came out with this hack which uses both translateZ and z-index for each div, which is working in those platforms. The order of translateZ and z-index is important. For setting each layers position is
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
position: relative;
z-index: 1;
I used the same value for the z-index and translateZ just for consistency, it is not necessary. See working example http://jsbin.com/peyehufo/5
Solution 4
I'm not advocating for this solution, but it's the best I've got at the moment...
In order to replicate the effect of z-index with position fixed on an iPhone, it seems to require two techniques together:
As suggested by @tnt above, use
transform:translateZ(n)
where z-index is used to get mobile safari to handle the stack order correctly. This appears to have the unfortunate side-effect of causing the position:fixed to stop working...Instead of position:fixed, use a javascript technique like this to fake it.
I haven't tested this thoroughly (because I'm not going to do it), but it seems to work fairly well. Although the "fixed" element seems to stutter a bit.
emersonthis
I am a designer, developer, and problem solver. I make websites and stuff. I work with brazen startups, modest individuals, earnest small business, and everyone in between. I care as much about how things look as how they work. I enjoy writing and teaching what I know. The best part about my job is constantly learning new things.
Updated on June 25, 2020Comments
-
emersonthis almost 4 years
I know iPhones used to not support position:fixed, but now it does and I'm seeing a weird glitch when I scroll a fixed position element behind other elements with higher z-index. The fixed positions element with the lower z-index appears in front momentarily, which looks really bad. Is there a way to prevent this?
I tried adding
-webkit-transform: translate3d(0, 0, 0);
to the fixed element and it doesn't seem to help this problem.Update I added
transform:translateZ(x)
in addition to the z-index and it did not fix the problem.Update2 I added
-webkit
prefix and this DOES fix the z-index problem on an mobile Safari, but also causes the position:fixed to work incorrectly in desktop Chrome.