iPad Safari elements disappear and reappear with a delay

Question

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?

Can you please add some of your actual code? – Zze Mar 14 '17 at 14:07 — Zze, Mar 14 '17 at 14:07
Create the code snippet with the problem, please. – sergdenisov Mar 16 '17 at 22:08 — sergdenisov, Mar 16 '17 at 22:08

score 2 · Accepted Answer · answered Mar 16 '17 at 19:47

2

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.

answered Mar 16 '17 at 19:47

Serg Chernata

12,280
6
32
50

Thanks for the good info. Then how can I avoid elements reappearing in ipad without affecting the fixed elements? Is there any solution for this? – Jeeva J Mar 17 '17 at 05:36
@JeevaJsb my best advice is to avoid using this hack in a blanket fashion. Don't apply it to everything. Try applying it only to the element that flickers. Otherwise, redesign your page so that you don't need this hack at all. – Serg Chernata Mar 17 '17 at 12:54
@SergChernata Thanks for this answer! was wondering what was going wrong in my app. – jegadeesh Nov 19 '18 at 07:17

score 1 · Answer 2 · answered Mar 20 '17 at 21:04

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.

iPad Safari elements disappear and reappear with a delay

2 Answers2

Linked