I’m building this website: https://bewerty.de/KUNDEN_PROJEKTE/Itau/production/#home
One of the nicer parts is a menu that is somewhat animated.
However, if I open the page on iOS Safari & Chrome, the stacking order (z-index) is reversed. We’re talking about the elements and their ::before pseudoes.
I read somewhere that z-index and transform: translate3d doesn’t play nice togehter. Despite this not being an issue on my desktop browsers, I removed z-index and made sure to set translate3d(0, 0, 1px); on the button element, and transform: translate3d(0, 15px, -100px) on the pseudo.
This does not resolve the issue. Adding a -webkit- prefix also wasn’t any help…
What am I missing here?
I was ultimately only able to solve this by replacing all transforms by ‘top’ positioning, & adding a z-index: -1 to the ::before element. Cost me the whole gnikcuf night, when are we finally gathering around iPhones with pitchforks…?