Mobile Safari Position:Fixed Z-Index Glitch When Scrolling

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.

Safari position: fixed is overlapped on scroll

It's definitely a z-index order problem in the Safari. Try this CSS:

.bhooksBookCard {
  -webkit-transform: translate3d(0,0,0);
}

Find this solution in this thread

Please try and let me know if it fixed your problem. Tested in the inspector and seems like it works.

Not respecting z-index on safari with position: sticky

This must be a Safari bug with their implementation of position: sticky
I've reported this as a bug to Apple - maybe do the same?

---

Related Topics