Can't avoid triggering Paint on Chrome while working only with CSS transform properties

Question

I'm trying to avoid the Paint phase on Chrome while using requestAnimationFrame to update the transform property of an element. I've created a small demo here (works only in Chrome): http://jsfiddle.net/ES3FM/1/

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

repaint();

I don't know if this behaviour can be achieved, if not I'm really interested in how we can dynamically affect the rendering of an element in the page without triggering the Paint phase but using only the Composite Layers phase.

Answer 1

I've solved it, position: absolute does not create a new layer, translateZ(0) does, here's the fixed version: 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();