Z-Index Issue on iOS Safari & Chrome

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:

z-index issue on ipad (chrome / safari)

It's because of your .container_12.

All have z-indexes except that one.
So you could simply add this styles to your .container_12

position:relative;
z-index:20;

and then you could put a z-index higher than 0 to .fondoTop

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?

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 :)

---

Related Topics