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

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

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

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

这给我造成了一个非常明显的问题,使整个事情看起来波涛汹涌,尽管事实并非如此。我猜 iPad Safari 正在尝试做一些事情来节省内存。有什么办法可以防止这种波动的发生吗?

此外,iPad Safari 究竟想要做什么?

最佳答案

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

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

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

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

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

https://stackoverflow.com/questions/9807620/

相关文章:

jquery - 使用 jQuery 获取所选选项的索引

javascript - 加载网页时如何自动将焦点设置到文本框?

jquery - HTML5 textarea 占位符未出现

jquery - Bootstrap 抛出 Uncaught Error : Bootstrap's

html - 删除vim中HTML标签之间的文本?

html - 100% 最小高度 CSS 布局

html - 在文本区域的占位符属性内插入换行符?

javascript - 在 HTML5 中使用目标 ="_blank"可以吗?

html - 为什么 z-index 不起作用?

php - 在我的 PHP 代码中解析错误 : Syntax error, 文件意外结束