
CSS box-shadow Can Slow Down Scrolling - Airbnb-Nerds
http://nerds.airbnb.com/box-shadows-are-expensive-to-paint
======
natmaster
Really stress your browser: <http://people.mozilla.org/~roc/scrolling-
boxes.html>

You might want to try Firefox if you don't want your scrolling to slow down.

~~~
Groxx
The first time that loaded (after 1/2 second or so to get all the resources),
it was almost as slow as Chrome, and stuttered _hard_ every second. The second
time it was pretty surprisingly smooth. Any idea why it would continue to suck
for the entire first load?

------
mikecomstock
I ran into this issue a few days ago too. Border-radius can also cause it.
There are multiple bug reports on this already:

<http://bit.ly/vbeCPM> <http://bit.ly/rSH6sV>

Hopefully this gets fixed soon.

------
rralian
I wrote a post about box-shadow a while back too. The slower repaint time was
masquerading as a javascript issue in my case. Took a little sleuthing. Here's
the post if you're interested: [http://effingsmart.com/2011/04/css-box-shadow-
and-whywhen-yo...](http://effingsmart.com/2011/04/css-box-shadow-and-whywhen-
you-shouldnt-use-it/)

------
ender7
Flash deals with this issue by cacheing any object that has a complex filter
(like a drop shadow) applied to it as a bitmap. This works pretty well, but
can lead to serious memory hogging.

Effects like drop-shadows and blurs are notoriously CPU-intensive (and we
don't even have arbitrarily-shaped drop shadows yet!). There's no way to do
them very effectively without moving onto the GPU.

Hopefully that'll happen soon. Or the CSS filters spec gets broad support, in
which case there will be a built-in drop-shadow shader.

------
hyphyphyph
Uhmm, no, really ?

~~~
smackfu
What good is a fancy new feature if it hurts performance?

~~~
jlarocco
Fancy new features have been hurting performance since the beginning. Nobody
notices it because new, faster hardware makes it a non-issue.

For example, in 1998 I could browse the web perfectly fine on a 100 Mhz
Pentium with 32 Mb of RAM. If new features didn't hurt performance then I
would still be able to browse the web perfectly fine on a 100 Mhz Pentium
today.

box-shadow is just a specific example. In five years even the crappiest smart
phone will have enough CPU/GPU power to display box-shadows without any
noticeable slow down.

~~~
smackfu
Sorry, I disagree. If you sacrifice performance (and thus usability) for
simple aesthetics, that's the wrong choice.

~~~
rhizome
I suppose you don't use a GUI, then?

------
hyphyphyph
Yeah, so call me a troll if you want. I'm kinda enjoying my negative scores.

I'm astonished though that any of this is "surprising news." It's kinda like
filing a bug report: "Rage/Doom/etc cause high CPU usage, PLZ FIX." Uhm, yeah.

There are a number of different algorithms for drawing blur. Some of them are
high quality but require more iterations for larger radii, some are much
faster and "scale" quite well but aren't of nearly the same high quality.

Of course putting complex effects that are computed on the CPU are going to be
slow -- at least just a tiny litte little.

~~~
FuzzyDunlop
To the knowledgeable it's no surprise at all (although I'm glad to realise my
own project's juddery scrolling is probably down to gratuitous border radius
and box shadow usage now).

To those who aren't knowledgeable and design websites without really digging
into optimising javascript performance and all that, they might never have
come across the concept of a 'simple website' in a browser having an impact on
performace. To these people it's just a page of text and images, not a game or
something typically known to require good hardware.

