Tech 13. Apr. 2015

Fasten CSS Transitions on mobile devices

It’s common to have some performance issues with animations on mobile devices. But on modern devices sometimes the promlems seem to be too heavy. Now I found a reason. “Webkit doesn’t involve the GPU unless you’re doing 3D transforms”.

So just force the browser to initialize GPU by CSS:

-webkit-transform: translateZ(0);

See: http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/

Thanks a lot.

It’s common to have some performance issues with animations on mobile devices. But on modern devices sometimes the promlems seem to be too heavy. Now I found a reason. “Webkit doesn’t involve the GPU unless you’re doing 3D transforms”.

So just force the browser to initialize GPU by CSS:

-webkit-transform: translateZ(0);

See: http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/

Thanks a lot.