Search code examples
iosiphonecssmobile-safari

Mobile safari position:fixed z-index glitch when scrolling

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.

Here is a jsfiddle as well.

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.

Solution

  • 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.