Is it possible to force hardware acceleration on a CSS width transition
animation, css, javascript
Solution
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.
Problem
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?