https://segmentfault.com/q/1010000005811431
靠博文那位老兄解决了我的难题。
问题我其实已经解决了,但是不知道根本原因。
解决办法1:JS代码中使用opacity、transform:translateZ(0)触发Composite Layers。
解决办法2:CSS中使用transform:translateZ(0),让table使用Layer Mode
——————————————————————————————————————
——————————————————————————————————————
——————————————————————————————————————
使用 GPU 渲染元素
并不是所有的CSS属性都能触发GPU的硬件加速,实际上只有少数属性可以,比如下面的这些:
transform
opacity
filter
强制使用GPU渲染
为了避免 2D transform 动画在开始和结束时发生的 repaint 操作,我们可以硬编码一些样式来解决这个问题:
.example1 {
transform: translateZ(0);
}
.example2 {
transform: rotateZ(360deg);
}
这段代码的作用就是让浏览器执行 3D transform。浏览器通过该样式创建了一个独立图层,图层中的动画则有GPU进行预处理并且触发了硬件加速。
开启GPU硬件加速可能触发的问题:
通过-webkit-transform:transition3d/translateZ开启GPU硬件加速之后,有些时候可能会导致浏览器频繁闪烁或抖动,可以尝试以下办法解决之:
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;