仅使用CSS转换属性时，无法避免在Chrome上触发Paint

Question

我正在尝试在使用requestAnimationFrame更新元素的transform属性时避免Chrome上的Paint阶段。我在这里创建了一个小型演示（仅适用于Chrome）：http://jsfiddle.net/ES3FM/1/

var div = document.querySelector('div');
function repaint(){
    webkitRequestAnimationFrame(repaint);
    div.style.webkitTransform = "scaleX(" + (Math.random() * 100) + ")";
};

repaint();

我不知道是否可以实现这种行为，如果不是我真的很感兴趣我们如何动态地影响页面中元素的渲染而不触发Paint阶段但只使用Composite Layers阶段。< / p>

Answer 1

我已经解决了，position: absolute没有创建新图层，translateZ(0)没有，这是固定版本：http://jsfiddle.net/sandro_paganotti/ES3FM/2/

var div = document.querySelector('div');
function repaint(){
    webkitRequestAnimationFrame(repaint);
    div.style.webkitTransform = "translateZ(0) scaleX(" + (Math.random() * 100) + ")";
};

repaint();