iOS Not Respecting Z-Index with -Webkit-Overflow-Scrolling

z-index only on iOS (Safari and Chrome) is not working (content appearing behind)

I have a solution. It's crappy, and's more of a hack, but it does work well enough.

if (isIosSafari()) {
   $(this).parent().css({"position": "fixed", "z-index": "11"});
   $(this).siblings().hide();
}

And the result:

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?

iPad Safari mobile seems to ignore z-indexing position for html5 video elements

The issue only occurs if the video element was dynamically created. If the element was just in the page as it loaded, z-index works fine.

You can fix z-index on dynamically created videos by giving the video element -webkit-transform-style: preserve-3d.

Yep, it's as bad as haslayout on IE!

z-index not working on Safari when manipulating it using Javascript

it has to be the position feature of the elements so that it can work

wrong example ( not working )

.className { z-index: 99999 !important; }


correct example ( it work )

.className { position: 'relative'; z-index: 99999 !important; }
.className { position: 'absolute'; z-index: 99999 !important; }
etc..


good luck :)

Minimizing iOS Mail app breaks z-index in CSS animation

I ended up fixing it by making the following changes to the CSS:

.carousel .car-rtn {
      z-index: 200;
      width: 10%;
}

And I also got rid of the drop shadow on the .carousel .car-ltn::after class.

---

Related Topics