iPad Safari 元素消失并延迟重新出现

Question

对于这个错误，我参考了下面的堆栈溢出问题，并在 css 中应用如下（参考： iPad Safari scrolling causes HTML elements to disappear and reappear with a delay)

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

申请后，我面临一个新问题。也就是说，如果我为某个元素应用固定位置，则该元素不会固定在浏览器顶部而不是滚动。

如果我删除上面的css，它工作正常。（参考：）

如何在不影响固定元素的情况下解决问题？

Answer 1

转换创建 new stacking order and context。这意味着 fixed 定位将不再绑定到视口。

在这种特殊情况下，简单的答案是您不能将转换和 fixed 定位结合起来。

Answer 2

如果你想继续使用这个 hack，你可以尝试将固定元素和内容分开，像这样：

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>

没有你的 HTML/CSS 我不能说得更准确，但我建议你避免使用这个 hack 并尝试正确地更改你的代码。

iPad Safari 元素消失并延迟重新出现

iPad Safari elements disappear and reappear with a delay

css

scroll

mobile-safari

ipad

ios