Read more

Large CSS box shadows can bring browsers to a crawl

Henning Koch
October 25, 2012Software engineer at makandra GmbH

This is not relevant when the shadowing element is on its own compositing layer.

Browser rendering engines are very slow at rendering large box shadows. I had a situation where a complex layout with fixed elements and large shadows slowed Firefox down to 2 frames/second for scrolling and DOM manipulation.

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

Some advice:

  • Be aware that by introducing fixed elements (e.g. sticky navigation bars) and large animations, you might force the browser to redraw large portions of the site when scrolling. When your fixed elements have shadows, this increases the screen area that needs to be redrawn, which might again require other elements to be redrawn, and so on.
  • Consider using filter: drop-shadow() Show archive.org snapshot instead, which renders with hardware acceleration.

Also see

Posted by Henning Koch to makandra dev (2012-10-25 15:28)