到底-webkit-transform: translate3d(0,0,0);是做什么的?有性能问题吗?我应该将其应用于身体还是单个元素?似乎可以大大改善滚动事件。
-webkit-transform: translate3d(0,0,0);
感谢您的教训!
-webkit-transform: translate3d(0,0,0); 使某些设备运行其硬件加速。
本机应用程序可以访问设备的图形处理单元(GPU)以使像素飞行。另一方面,Web应用程序在浏览器的上下文中运行,这使软件可以完成大部分(如果不是全部)渲染,从而降低了转换所需的功能。但是Web一直在追赶,大多数浏览器供应商现在都通过特定的CSS规则提供图形硬件加速。
使用-webkit-transform: translate3d(0,0,0);将使GPU适应CSS过渡,使其更流畅(FPS更高)。
注意: translate3d(0,0,0)根据您看到的内容,不会执行任何操作。它将对象沿x,y和z轴移动0px。这只是强制硬件加速的一项技术。
translate3d(0,0,0)
另一种选择是-webkit-transform: translateZ(0)。如果Chrome和Safari由于转换而闪烁,请尝试-webkit- backface-visibility: hidden和-webkit-perspective: 1000。
-webkit-transform: translateZ(0)
-webkit- backface-visibility: hidden
-webkit-perspective: 1000