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?

回答1:

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.

回答2:

If you want to keep using this hack, you could try to separate fixed elements and the content, something like this:

html, body {
    margin: 0;
    overflow-y: hidden;
    height: 100%;
}

.content, .content * {
    -webkit-transform: translate3d(0, 0, 0);
}

.content {
    -webkit-overflow-scrolling: touch;
    height: 100%;
    overflow-y: auto;
}

.fixed {
    position: fixed;
    background: red;
    width: 100%;
    padding: 20px;
    z-index: 1;
}

.content-example {
    height: 2000px;
    background: yellow;
}

<div class="fixed">Fixed</div>
<div class="content">
    <div class="content-example"></div>
</div>

Without your HTML/CSS I can't say more precisely, but I recommend you to avoid using this hack and try to change your code properly.

来源：https://stackoverflow.com/questions/42621432/ipad-safari-elements-disappear-and-reappear-with-a-delay