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

Posted 2023-05-08

【中文标题】防止固定位置元素在 jQuery 动画期间闪烁

【英文标题】：Prevent fixed position element from flickering during jQuery animation

【发布时间】：2013-08-13 16:34:21

【问题描述】：

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

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

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

【参考方案1】：

我遇到了同样的问题，这似乎是页面内部发生太多事情时发生的错误，我可以通过将以下转换代码添加到固定位置元素来修复它，（@987654321 @) 强制浏览器使用硬件加速来访问设备的图形处理单元 (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);

【参考方案2】：

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

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

bug。

【参考方案3】：

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