jquery - 防止固定位置元素在 jQuery 动画期间闪烁

Question

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

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

这仅仅是移动设备的硬件限制吗？还是我可以采取一些措施来消除或至少最大限度地减少这种情况的发生？

Answer 1

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

使用-webkit-transform:translate3d(0,0,0);将使 GPU 开始执行 CSS 转换，使它们更平滑(更高的 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);
}