Mobile safari position:fixed z-index glitch when scrolling

Question

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

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