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

【问题标题】：iPad Safari elements disappear and reappear with a delayiPad Safari 元素会延迟消失并重新出现
【发布时间】：2017-07-26 01:48:31
【问题描述】：

对于这个错误，我参考了下面的堆栈溢出问题，并在 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）

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

【问题讨论】：

你能添加一些你的实际代码吗？
请创建有问题的代码sn-p。

标签： ios css ipad scroll mobile-safari

【解决方案1】：

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

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

【讨论】：

感谢您提供的好信息。那么如何在不影响固定元素的情况下避免元素重新出现在 ipad 中呢？有什么解决办法吗？
@JeevaJsb 我最好的建议是避免以一揽子方式使用这个黑客。不要把它应用到所有事情上。尝试仅将其应用于闪烁的元素。否则，请重新设计您的页面，这样您就根本不需要这个 hack。
@SergChernata 感谢您的回答！想知道我的应用出了什么问题。

【解决方案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 并尝试正确更改您的代码。

【讨论】：