Mobile safari position:fixed z-index glitch when scrolling
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.
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
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