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.