

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

