Search code examples
ioscssipadscrollmobile-safari

iPad Safari elements disappear and reappear with a delay

For this bug I have referred the below stack overflow question and have applied in the css as follows (Refer: iPad Safari scrolling causes HTML elements to disappear and reappear with a delay)

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

After applying, I am facing a new issue. That is if I apply fixed position for an element, that's not fixed in the browser top instead of scrolling.

If I remove the above css, It is working fine. (Refer: Position fixed not working is working like absolute)

How to fix the issue without affecting the fixed element?

Solution

  • Transforms create a new stacking order and context. That means that fixed positioning will no longer be tied to the viewport.

    In this particular case, the simple answer is that you can't combine transforms and fixed positioning.