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?

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?

• javascript
• css
• animation

• could you fiddle an example? Id like to see what you mean. – floor Commented Feb 23, 2015 at 22:14
• On phone. Will do later. Thanks – Walrus Commented Feb 23, 2015 at 22:15
• 1 You could always scaleX(2.0) on your desired element and scaleX(0.5) on its children. It's a pretty crappy solution though as the content won't reflow to the new size. – Josh Burgess Commented Feb 23, 2015 at 22:23
• @josh. Could work though with overflow hidden. – Walrus Commented Feb 23, 2015 at 22:51
• I don't see how overflow: hidden would help that, as the content is just going to be its original size in a container that's twice as wide. Really, you'd need to add content dynamically after the resize. There's not a way I intuitively know to do this without incorporating some kind of JavaScript. It's probably not a lot of JavaScript, but there would need to be a bination of JavaScript and probably layering of sibling divs, which is messy to say the least. – Josh Burgess Commented Feb 24, 2015 at 3:40

1 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./en/tutorials/speed/high-performance-animations/
• http://blogs.adobe./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.