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


i'm trying avoid paint phase on chrome while using requestanimationframe update transform property of element. i've created small demo here (works 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 behaviour can achieved, if not i'm interested in how can dynamically affect rendering of element in page without triggering paint phase using composite layers phase.

i've solved it, position: absolute not create new layer, translatez(0) does, here's 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();    

Comments

Popular posts from this blog

java - Intellij Synchronizing output directories .. -

git - Initial Commit: "fatal: could not create leading directories of ..." -