我有同样的问题,它似乎是一个错误发生在页面内部发生太多时,我可以通过将以下转换代码添加到固定位置元素来修复它(transform: translateZ(0);-webkit-transform: translateZ(0);
),强制浏览器使用硬件加速来访问设备的图形处理单元(GPU)以使像素飞行。另一方面,Web应用程序运行在浏览器的上下文中,这使得软件可以执行大部分(如果不是全部)渲染,从而导致转换的功率减少。但是网络一直在追赶,大多数浏览器厂商现在都通过特定的CSS规则来提供图形硬件加速。
使用-webkit-transform:translate3d(0,0,0);将启动GPU进行CSS转换,使其更平滑(更高的FPS)。
注: translate3d(0,0,0)什么也不做在你所看到的条款。它将对象在x,y和z轴上移动0px。这只是一种强制硬件加速的技术。
#fixed-element {
position: fixed;
/* MAGIC HAPPENS HERE */
transform: translateZ(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}
来源
2014-09-18 23:20:32
Neo
非常感谢您的快速反应,比尔!你的回答实际上是很有意义的,它让我看到了我以错误的方式思考我的问题的事实。我感谢您花时间向我解释这一点。祝你有个好的一天! – user1721301
很高兴能帮到你! –