CSS box-shadow Can Slow Down Scrolling

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

Re: CSS box-shadow Can Slow Down Scrolling

#8

Post by natmaster » Fri, Nov 11, 2011, 9:04 PM UTC

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.

Re: CSS box-shadow Can Slow Down Scrolling

#9

Post by hyphyphyph » Fri, Nov 11, 2011, 9:12 PM UTC

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.

Re: CSS box-shadow Can Slow Down Scrolling

#10

Post by jlarocco » Fri, Nov 11, 2011, 9:32 PM UTC

smackfu wrote: post #6

hyphyphyph wrote: post #2

Uhmm, no, really ?

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 even the crappiest smart phone will have enough CPU/GPU power to display box-shadows without any noticeable slow down.