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

[alexkearns]

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; }

[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.

[alexkearns]

Actually, I don't think you need the *:

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

[gondo]

simple as googling http://css-infos.net/property/-webkit-backface-visibility

[Kevindish]

What does it do? Im curious to know :)

[cheald]

Short version: Backface culling. http://en.wikipedia.org/wiki/Back-face_culling