Question

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

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

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

如果我删除上述css，它运行正常。 （参阅：Position fixed not working is working like absolute）

如何解决问题而不影响固定元素？

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元素消失并再次出现

2 个答案: