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?
Asked
Active
Viewed 4,513 times
5
-
could you fiddle an example? Id like to see what you mean. – floor Feb 23 '15 at 22:14
-
On phone. Will do later. Thanks – Walrus Feb 23 '15 at 22:15
-
1You 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 Feb 23 '15 at 22:23
-
@josh. Could work though with overflow hidden. – Walrus Feb 23 '15 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 combination of JavaScript and probably layering of sibling divs, which is messy to say the least. – Josh Burgess Feb 24 '15 at 03:40
1 Answers
5
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.
