-webkit-transform: translateZ(0);

 

transform: translateZ(0);

 

反复的测试，bug就真的解决了。

 

总结

 

一般关于css3动画性能优化有2个：

 

尽量使用 transform 当成动画熟悉，避免直接使用 height,width,margin,padding 等；

 

建议开启浏览器 GPU 硬件加速

 

所以，我们使用tanslateZ(0)变成3d效果，开启了浏览器 GPU 硬件加速，提高浏览器渲染的性能；上面这个因fixed定位页面元素重排重绘时盒模型bug可能是网页渲染导致的，所以类似的bug或者抖动可以尝试tanslateZ(0)去解决，不过这样也有缺点就是耗电和发热问题。