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() Show archive.org snapshot instead, which renders with hardware acceleration.

Also see

Henning Koch

makandra.com

Say thanks2

Last edit

Over 2 years ago

Henning Koch

License

Source code in this card is licensed under the MIT License.

Async control flow in JavaScript: Promises, Microtasks, async/await

Slides for Henning's talk on Sep 21st 2017.

Understanding sync vs. async control flow

Talking to synchronous (or "blocking") API

print('script start')
html = get('/foo')
print(html)
print('s...

Delivering Carrierwave attachments to authorized users only

Preparation

To attach files to your records, you will need a new database column representing the filename of the file. To do this, add a new migration (rails g migration <name>) with the following content:

class AddAttachmentToNotes...

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

Large CSS box shadows can bring browsers to a crawl

Also see

Related cards:

Understanding sync vs. async control flow

Talking to synchronous (or "blocking") API

Summary

Preparation

Introduction