修改transform属性导致定位元素重绘？

Question

一个轮播图播放的时候（改变的是transform: translate3d属性的X值），当开启Redering面板下的Paint flashing的时候，发现页面上所有设置了position: relative或position: absolute的元素会发生重绘，产生的后果是有些文字会出现抖动的情况。查看了一下淘宝和京东的网站，发现京东也会出现这个问题，但是淘宝就不会，不知道这个是由什么引起的

Answer 1

原因：
Why does transform with transition cause the whole page to repaint?

解决方案：

1. 不用transform实现轮播效果
   一般轮播组件都支持配置是否采用transform实现轮播效果。

2. 提升设置动画的元素
   给轮播元素增加CSS

   will-change: transform

如果先麻烦可以这样试试（最好不要这样做）：

* {
  will-change: transform;
  transform: translateZ(0);
}