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

Question

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

很简单,设置标题position: fixed; top: 0;.当我使用jQuery animate()函数时,无论是滚动到特定元素还是页面顶部,标题都会从屏幕顶部向上和向下跳跃,就像它无法跟上滚动页面一样.

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

Answer 1

我有同样的问题,它似乎是一个错误,当页面内部进行太多时,我可以通过将以下转换代码添加到固定位置元素(transform: translateZ(0);-webkit-transform: translateZ(0);)强制浏览器来修复它使用硬件加速来访问设备的图形处理单元(GPU)以使像素飞行.另一方面,Web应用程序在浏览器的上下文中运行,这使得软件可以完成大部分(如果不是全部)渲染,从而减少了转换的马力.但是Web一直在追赶,大多数浏览器厂商现在通过特定的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);
}

Answer 2

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

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

Ps：如果您使用 js 模拟滚动（视差、锚标记动画...），如果元素是固定的，则在用户实际滚动它几个像素之前，它将无法单击。这是 ios 上的一个已知错误。