Posted about 9 years ago. Visible to the public. Deprecated.

Large CSS box shadows can bring browsers to a crawl

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.

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() Archive instead, which renders with hardware acceleration.

Also see

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Avatar
Henning Koch
Last edit:
4 months ago
by Henning Koch
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more