7

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!

MMMdata
  • 817
  • 8
  • 19

2 Answers2

12

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.

Aaron Lampros
  • 290
  • 2
  • 5
0

It seems like the -webkit-transform workaround no longer works in Chrome and MS Edge. (Both are based on Blink, which forked from WebKit in 2013.) But Firefox and Safari seem to handle text-shadow just fine now without any lag.

I was able to avoid text-shadow lag by using drop-shadow() instead:

.shadow {
  /* text-shadow: 1px 2px 4px black; */
  filter: drop-shadow(1px 2px 4px black);
}
<ul>
  <li class="shadow">Item 1</li>
  <li class="shadow">Item 2</li>
  <li class="shadow">Item 3</li>
</ul>

<ul class="shadow" style="background: pink">
  <li>Effect of applying <code>drop-shadow</code> to an entire div</li>
  <li><code>drop-shadow</code> is based on the alpha mask of the entire element</li>
</ul>

The only limit here is you'll need to set the filter on every individual content element, rather than on one root element. Otherwise, the shadow applies to the whole element like a box-shadow, if it has an opaque background.

Check out MDN docs: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow

SimonT
  • 2,219
  • 1
  • 18
  • 32