Mobile safari position:fixed z-index glitch when scrolling

Question

I know iPhones used to not support position:fixed, but now it does and I\'m seeing a weird glitch when I scroll a fixed position element behind other elements with

Answer 1

Update 1: I added transform:translateZ(x) in addition to the z-index and it did not fix the problem.

Update 2: I added -webkit- prefix and this DOES fix the z-index problem on mobile Safari, but also causes the position:fixed to work incorrectly in desktop Chrome. "

Then try to wrap -webkit-transform:translateZ(x) in a mobile specific media query.
For example:

@media only screen and (min-device-width : ... ) and (max-device-width : ... ) {
    .whatever {
        -webkit-transform: translateZ(x)
    }
}

So in this case it won't do anything on desktop Chrome