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

Question

我目前正在为 iPad Safari 使用 HTML5 和 jQuery 开发 Web 应用程序。我遇到了一个问题，其中大滚动区域导致屏幕外的元素在我向下滚动到它们时延迟出现。

我的意思是，如果我有一行图像（甚至是带有渐变的 div）在屏幕外，当我向下（或向上）滚动到它时， 预期的行为 是元素出现在屏幕上作为我正在滚动到它。

但是，直到我将手指从屏幕上移开并且滚动条完成所有动画后，该元素 才会出现。

这对我来说是一个非常明显的问题，使整个事情看起来很不稳定，尽管事实并非如此。我猜 iPad Safari 正在尝试做一些事情来节省内存。有什么办法可以防止这种不稳定的情况发生吗？

此外，iPad Safari 到底想做什么？

原文由 codeBearer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

完整的解决方案：

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

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

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

原文由 codeBearer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

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

小贴士： iOS 5 原生滚动 – Grins & Gotchas

原文由 Colin Williams 发布，翻译遵循 CC BY-SA 4.0 许可协议