Sunday, November 5, 2017

Change CSS3 transform without triggering recalculate styles?

Trying to animate at 60FPS an element with absolute positioning on the screen I noticed that most CPU time is used by recaculateStyles.

Can I change the element.style.transform property without triggering recalculate styles?

Currently I change the position like so: el.style.transform = 'translate3d(${x}px, ${y}px, 0px)';

Here's a demo: http://jsfiddle.net/pLtvxv41/ You can use the Google Chrome performance dev tool to see the usage of the recalculateStyle function.

Can this be changed in a more efficient way?

1 Answers

Did you tried to add -webkit-transform: translate3d(0,0,0); by default to avoid a complete repaint of the page?

You can also try the will-change behavior to inform the browser that the transform property will be changed

.example {   will-change: transform; }