HN Explorer

Massively improve JS animation smoothness in Safari with one line of CSS

5 points by alexkearns ↗ HN
I thought I'd share this as it might be useful. Including the following CSS can massively improve the smoothness of JS animations in Safari desktop and mobile. It also solves weird flickering issues on iPad/iPhone Safari. Don't know why it works but it does and the improvements, at least for my web app, were spectacular.

html * { -webkit-backface-visibility: hidden; }

6 comments

[ 3.4 ms ] story [ 28.3 ms ] thread
alexkearns
Actually, I don't think you need the *:

html { -webkit-backface-visibility: hidden; } should do

[dead] Encryptor
the first thing that comes to my mind is OpenGL backface culling, which removes invisible faces from a scene.

glEnable(GL_CULL_FACE); glCullFace(GL_BACK);

ryanschmidt
When applied as suggested, this will cause smaller type (~10-12px) to appear very blurry. Also, when using an iOS device, it will make all text unreadably blurry upon zooming in.

I suggest applying this property only to the element you'd like to improve the animation of.