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 on both FF4 and Chrome 10. Is there any good way to measure this or reduce it? I want good performance, but I also want to be able to use the shadows to create dimensionality between the various elements.

Thanks!

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.