我目前正在为 iPad Safari 开发一个使用 HTML5 和 jQuery 的 Web 应用程序。我遇到了一个问题，当我向下滚动到它们时，大滚动区域会导致屏幕外的元素在延迟后出现。
我的意思是，如果我有一排屏幕外的图像（甚至是带有渐变的 div），当我向下（或向上）滚动到它时， 预期的行为 是元素在屏幕上显示为我正在滚动到它。
但是，直到我将手指从屏幕上移开并且滚动条完成所有动画后，该元素 才会出现。
这对我来说是一个非常明显的问题，使整个事情看起来波涛汹涌，尽管事实并非如此。我猜 iPad Safari 正在尝试做一些事情来节省内存。有没有办法可以防止这种波涛汹涌的发生？
此外，iPad Safari 究竟想做什么？
我之前使用的是 translate3d 。它产生了不想要的结果。基本上，它会切断 而不渲染 屏幕外的元素，直到我与它们交互。因此，基本上，在横向方向上，我的屏幕外网站的一半没有被显示。这是一个 iPad 网络应用程序，因此我正在修复中。
将 translate3d 应用于相对定位的元素解决了这些元素的问题，但其他元素一旦离开屏幕就会停止渲染。除非我重新加载页面，否则我无法与之交互的元素（艺术品）将永远不会再次呈现。
完整的解决方案：
*:not(html) { -webkit-transform: translate3d(0, 0, 0); }
现在，虽然这可能不是最“有效”的解决方案，但它是唯一有效的解决方案。使用-webkit-overflow-scrolling: touch. 除非将 translate3d 应用于可能由于该滚动而离开屏幕的所有其他元素，否则这些元素将在滚动后被切掉。
-webkit-overflow-scrolling: touch
（这是我问题的完整答案。我最初将[Colin Williams的答案标记为正确答案，因为它帮助我找到了完整的解决方案。社区成员 @Slipp D. Thompson 在大约 2.5 年后编辑了我的问题我问过这个问题，并告诉我我在滥用 SO 的问答格式。他还告诉我单独发布这个作为答案。@Colin Williams，谢谢！你链接到的答案和文章给了我一个线索尝试使用 CSS
您需要欺骗浏览器以更有效地使用硬件加速。您可以使用空的 3D 变换来做到这一点：
-webkit-transform: translate3d(0, 0, 0)
特别是，您需要对具有position:relative;声明的子元素进行此操作（或者，全力以赴，对所有子元素执行此操作）。
position:relative;
这不是一个有保证的修复，但它在大多数情况下都相当成功。
提示：iOS 5 原生滚动——Grins & Gotchas
