iPad Safari元素消失并延迟出现

Question

对于此错误，我已转介以下堆栈溢出问题，并在CSS中应用了如下（请参阅：iPad Safari滚动会导致HTML元素消失并延迟出现）

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

申请后，我将面临新问题。那就是如果我为元素应用固定位置，那不是固定在浏览器顶部而不是滚动中。

如果我删除了上述CSS，则可以正常工作。（请参阅：固定的位置不起作用的位置与绝对工作一样工作）

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

Answer 1

变换创建一个新的堆叠顺序和上下文。这意味着fixed定位将不再绑定到视口。

在这种特殊情况下，简单的答案是您无法结合转换和fixed定位。

Answer 2

如果要继续使用此骇客，则可以尝试将固定元素和内容分开，类似的内容：

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，我不能更精确地说，但是我建议您避免使用此骇客并尝试正确更改您的代码。