Menu
As I understand hardware acceleration on iOS devices is enabled when using translate3d(). So why this test on jsperf shows that using css left/top is faster?
309
Hardware-Accelerated CSS on Desktop and Mobile BrowsersCSS animations, transforms and transitions are not automatically GPU accelerated, and instead execute from the browser's slower software rendering engine.
We already know that animation of transform and opacity via CSS transitions or animations automatically creates a compositing layer and works on the GPU.
So this is due to the absolute positioned macbook sticks to pixel positions, whereas the translate() 'd one can interpolate at sub-pixel positions.
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
I have used translate3d extensively on iOS in lieu of CSS left/top, and I can say one thing:
It is truly faster for animating things (which jsperf does not seem to do.) My guess is, left/top is faster when benchmarking since nothing is animated and I don't think anything is displayed either.
It is when used in conjunction with transition (or -webkit-transition) that translate3d works its magic.
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
