CSS3硬件加速需要注意的事项

webkit浏览器会把所有需要动画的元素放到复合层中渲染,另外以下两种情况也会使不需要动画的元素也放到复合层中渲染,这样会导致元素动画不流畅(原则是需要的动画才让它在复合层中渲染)

1,元素有一个包含复合层的后代节点||元素有一个在复合层中渲染的后代节点(换句话说,就是一个元素拥有一个子元素,该子元素在自己的层里)

2,元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

当一个元素需要使用动画的时候,通常会使它的兄弟元素也在复合层中渲染,这会导致动画效果很不流畅,解决办法是提升该元素的层级z-index

原文地址:https://www.cnblogs.com/toward-the-sun/p/5129774.html