Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS box-shadow Can Slow Down Scrolling

nerds.airbnb.com

Post reply on HN
Print view View original

11–15 of 15 posts

Re: CSS box-shadow Can Slow Down Scrolling

#11

Post by FuzzyDunlop »

hyphyphyph wrote: post #9

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 ar…

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.

Re: CSS box-shadow Can Slow Down Scrolling

#12

Post by Groxx »

natmaster wrote: post #8

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.

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?

Re: CSS box-shadow Can Slow Down Scrolling

#13

Post by smackfu »

jlarocco wrote: post #10
smackfu wrote: post #6

Earlier quoted context omitted.

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

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 e…

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

Re: CSS box-shadow Can Slow Down Scrolling

#14

Post by 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.

Re: CSS box-shadow Can Slow Down Scrolling

#15

Post by rhizome »

smackfu wrote: post #13
jlarocco wrote: post #10

Earlier quoted context omitted.

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 e…

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

I suppose you don't use a GUI, then?
Post reply on HN