text-shadow (and other css3) causes scroll lag

Question

I\'ve noticed that the more I use certain CSS3 elements (namely box-shadow and text-shadow) the more scroll lag exists on a page. I notice the problem

Answer 1

I've found the two biggest offenders (as far as performance goes) are the blur amount of your shadows and whether you're using any alphas (rgba, hsl, etc).

Hardware acceleration is key to using any of the css3 goodies and maintaining acceptable performance. Webkit (not sure about FF4) won't even use the GPU unless you specifically ask for a three-dimensional operation. You can kick in the GPU for any element by simply applying a 0-pixel 3d transform:

-webkit-transform: translate3d(0,0,0);
/* OR */
-webkit-transform: translateZ(0);

Paul Irish has a great talk on css3 performance and using webkits dev flags to debug GPU rendering.

From terminal (OS X), you can launch Safari with the GPU rendering debug flag with this:

CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari

This will show you (in translucent red) which DOM regions are being rendered on the GPU and which ones are rendered by the CPU like this.