Is it possible to force hardware acceleration on a CSS width transition

Question

I have noticed jerky laggy performance when I change an elements width or margin with CSS transitions.

Is there anyway to force hardware acceleration? Is there any way to use transform properties to achieve a seamingly similar result?

Answer 1

Not really. Hardware acceleration depends on a lot of factors, none of them under javascript control.

Which leaves us the question of how to improve CSS width/margin transition performance, and the answer is usually "replace it with scale", because it can be done cheaply on GPU and because it doesn't trigger reflow.

• http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
• http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/
• Improving CSS3 transition performance
• Jerky CSS transform transition in Chrome

It is also known that Chrome does not do as well a job accelerating CSS transitions as Firefox and IE.

• Why transitions for some CSS properties are slow and none fluent
• CSS3 transform difference in Firefox and Chrome and IE
• http://www.binarymoon.co.uk/2014/02/fixing-css-transitions-in-google-chrome/

In fact, given that Google rejected Pointer Event on the ground of speed, which IE solved by GPU acceleration, it can be said that Chrome (and Webkit in general - Safari is even slower) is lagging behind on this front, and the only way to help is contributing code to Chromium / Webkit.

I'd rather switch to a quicker transition.