5

这个问题适用于普通的 jQuery 和 jQuery Mobile 网站，因为我目前正在处理相同问题的每一个网站。这当然只是移动设备上的问题，或者至少是 iPhone 4 上的问题。

很简单，标题设置为position: fixed; top: 0;. 当我使用 jQueryanimate()函数时，无论是滚动到特定元素还是页面顶部，标题都会从屏幕顶部上下跳动，好像跟不上滚动页面一样。

这仅仅是移动设备的硬件限制，还是我可以做些什么来消除或至少尽量减少这种情况？

4

3 回答 3

28

我遇到了同样的问题，这似乎是页面内部发生太多事情时发生的错误，我能够通过将以下转换代码添加到固定位置元素（transform: translateZ(0);-webkit-transform: translateZ(0);）来修复它，这会强制浏览器使用硬件加速来访问设备的图形处理单元 (GPU) 以使像素飞行。另一方面，Web 应用程序在浏览器的上下文中运行，这使软件可以完成大部分（如果不是全部）渲染，从而减少了转换的动力。但是 Web 一直在迎头赶上，现在大多数浏览器供应商都通过特定的 CSS 规则提供图形硬件加速。

使用-webkit-transform: translate3d(0,0,0); 将为 CSS 过渡启动 GPU，使它们更平滑（更高的 FPS）。

注意： translate3d(0,0,0) 对您看到的内容没有任何作用。它在 x、y 和 z 轴上将对象移动 0px。这只是一种强制硬件加速的技术。

#element {
    position: fixed;
    z-index: 9990;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
于 2014-09-18T23:03:16.097 回答
0

移动浏览器对固定元素的支持非常有限，你需要选择绝对位置+JS的解决方案，这里有一篇关于这个主题的有趣文章。

我为我的移动网站修复它的方式，我根据滚动的距离重新调整了固定元素的顶部。

Ps：如果您正在使用js（视差，锚标记动画......）模拟滚动，如果元素是固定的，则在用户物理滚动它几个像素之前它是不可点击的。这是ios上的一个已知错误。

于 2013-08-12T11:42:57.237 回答
0

另外，当我将 div 设置为 position:fixed 和 top:0 时，我遇到了类似的问题，当我在 android 手机上测试移动应用程序时，当我开始向上滚动时，div 的底部会闪烁。所以为了解决/破解它，我设置了高度：1000px 而不是 100% 并设置了溢出：隐藏。现在 div 不再闪烁。

于 2018-10-09T23:10:30.110 回答