Safari Z-index Issues

Hi Guys,

Hoping you can help - I’m having some weird issues with Z-index on safari. Everything works great in Chrome but in Safari and iOS Safari my sticky Header 1 is really buggy - sometimes it is correctly hidden by the image on a higher Z-index / sometimes its appears above it.

*When my fade up ‘Enquire’ link reaches its sticky position it seems to kick in the correct Z-index order, but removing the ‘Enquire’ still produces the incorrect Z-index *

I hope that makes sense. Thanks in advance.
K

Correct z-index - Chrome:

Incorrect z-index - Safari:

https://preview.webflow.com/preview/glithero?utm_medium=preview_link&utm_source=designer&utm_content=glithero&preview=a6ac8e4138f7b1a5a9a832ecc0340490&pageId=60b104777ec6648724df7904&itemId=60bf8d7d2c84b446954b3596&workflow=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

finally found a work around - its messed up my enquire button but the z-index feels more solid on safari -

“For anyone wondering, I found that setting the element below (the one that should go over the sticky content) to sticky as well but leaving all the settings at auto did solve the problem on safari without any side effects.”
thanks to @Yukon

1 Like