iPad Safari 滚动会导致 HTML 元素消失并延迟重新出现

您需要欺骗浏览器以更有效地使用硬件加速。您可以使用空的 3D 变换来做到这一点：

-webkit-transform: translate3d(0, 0, 0)

特别是，您需要对具有 position:relative; 声明的子元素进行此操作（或者，全力以赴，对所有子元素执行此操作）。

这不是一个有保证的修复，但它在大多数情况下都相当成功。

帽子提示：iOS 5 Native Scrolling–Grins & Gotchas

我之前使用的是 translate3d。它产生了不想要的结果。基本上，它会切断而不渲染屏幕外的元素，直到我与它们交互。因此，基本上，在横向方向上，我的屏幕外网站的一半没有被显示。这是一个 iPad 网络应用程序，因此我正在修复中。

将 translate3d 应用于相对定位的元素解决了这些元素的问题，但其他元素一旦离开屏幕就会停止渲染。除非我重新加载页面，否则我无法与之交互的元素（艺术品）将永远不会再次呈现。

完整的解决方案：

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

现在，虽然这可能不是最“有效”的解决方案，但它是唯一有效的解决方案。使用 -webkit-overflow-scrolling: touch 时，Mobile Safari 不会呈现屏幕外的元素，或者有时呈现不规则的元素。除非将 translate3d 应用于所有其他可能由于该滚动而离开屏幕的元素，否则这些元素将在滚动后被切掉。

_{（这是我问题的完整答案。我最初将 Colin Williams' answer 标记为正确答案，因为它帮助我找到了完整的解决方案。社区成员@Slipp D. Thompson 在大约我问了 2.5 年，并告诉我我在滥用 SO 的问答格式。他还告诉我将此作为答案单独发布。@Colin Williams，谢谢！答案和您链接到的文章给出了我是一个尝试使用 CSS 的线索。所以，再次感谢，并希望这可以帮助其他一些迷失的灵魂。这肯定对我有很大帮助！）}

针对除 html 之外的所有元素：*:not(html) 在我的案例中导致其他元素出现问题。它修改了堆叠上下文，导致一些 z-index 中断。

我们最好尝试定位正确的元素并仅对其应用 -webkit-transform: translate3d(0,0,0)。

有时 translate3D(0,0,0) 不起作用。我们可以使用以下方法，针对正确的元素：

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

/* iOS redraw fix */
animation: redraw 1s linear infinite;

当 translate3d 不起作用时，尝试添加透视图。它总是对我有用

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

Increase Your Site’s Performance with Hardware-Accelerated CSS

将 -webkit-transform: translate3d(0,0,0) 静态添加到元素对我不起作用。

我动态应用此属性。例如，当页面滚动时，我在一个元素上设置了 -webkit-transform: translate3d(0,0,0)。然后在短暂的延迟之后，我重新设置了这个属性，也就是 -webkit-transform: none 这个方法似乎行得通。

_{谢谢，Colin Williams for pointing me in the right direction.}

我在 iOS 7 上使用 iscroll 4.2.5 时遇到了同样的问题。整个滚动元素就消失了。

我已尝试按照此处的建议添加 translate3d(0,0,0)。它已经解决了这个问题，但它禁用了iscroll“snap”效果。

解决方案是将 "position:relative; z-index:1000;display:block" CSS 属性赋予包含滚动元素的整个容器，而无需将 translate3d 赋予子元素。

我在使用旧版本的 Fancybox 时遇到了同样的问题。

升级到 v3 将解决您的问题，或者您可以添加：

html, body {
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

在时间 translate3d 可能不起作用。在这些情况下，可以使用 perspective

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

我很确定我刚刚解决了这个问题：

overflow-y: auto;

（根据您的需要，大概只有 overflow: auto; 也可以工作。）

存在应用旋转和/或使用 Z 索引的情况。

旋转：用于旋转元素的现有 -webkit-transform 声明可能还不足以解决外观问题（如 -webkit-transform: rotate(-45deg)）。在这种情况下，您可以使用 -webkit-transform: translateZ(0px) rotateZ(-45deg) 作为技巧（注意旋转Z）。

Z 索引：与旋转一起，您可以定义正 z-index 属性，如 z-index: 42。就我而言，“轮换”下描述的上述步骤足以解决问题，即使是空的 translateZ(0px)。我怀疑这种情况下的 Z 索引可能首先导致消失和重新出现。在任何情况下都需要保留 z-index: 42 属性——仅 -webkit-transform: translateZ(42px) 是不够的。

这是开发人员面临的一个非常普遍的问题，这主要是由于 Safari's 属性不重新创建定义为 position : fixed 的元素。

因此，如其他答案中所述，要么更改位置属性，要么需要应用一些技巧。

Issues with position fixed & scrolling on iOS

Change to position fixed on iOS Safari while scrolling

就我而言（一个 iOS PhoneGap 应用程序），将 translate3d 应用于相关子元素并不能解决问题。我的可滚动元素没有设置高度，因为它是绝对定位的，我正在定义顶部和底部位置。

添加一个最小高度（100 像素）为我修复了它。

我在 Framework7 和 Cordova 项目中遇到了这个问题。我尝试了上述所有解决方案。他们没有解决我的问题。

在我的例子中，我在同一页面上使用了 10 多个 CSS 动画，并无限旋转（变换）。我不得不删除动画。现在还可以，缺少一些视觉功能。

如果其他答案中的解决方案对您没有帮助，您可能会开始消除一些动画。

-webkit-transform: translate3d(0, 0, 0); 技巧对我不起作用。就我而言，我已将父母设置为：

/* Parent */
height: 100vh;

将其更改为

height: auto;
min-height: 100vh;

解决了这个问题，以防其他人面临同样的情况。

就我而言，CSS 没有解决这个问题。我在使用 jQuery 重新渲染按钮时注意到了这个问题。

$("#myButton").html("text")

尝试这个：

$("#myButton").html("<span>text</span>")