extremely slow CSS3 box-shadows in Chrome

Question

I've been developing an app specifically for modern browsers and have made very heavy use of the box-shadow property.

Until recently this has been absolutely fine on all supporting browsers. However about a month ago when testing in Chrome I noticed that scrolling was 'extremely' slow, to the point of being almost unusable.

Over the past month I have tried ripping out scripts/messing with my html structure, everything you can think of until finally today I have found the cause.

With box-shadow / webkit-box-shadow disabled on all elements that I had it set for, the problem disappears.

What strikes me as odd is that it worked fine in Chrome until around a month ago. Incidentally the scrolling on the windows version of safari is fine, albeit a little slower than IE/Opera and Firefox.

Is this a known problem? Does anyone have a workaround for this?

And most importantly, is there another method of replicating the same effect without using the CSS3 property?

Answer 1

There was a bug report opened and closed in Webkit last year:

CSS3 box-shadow causes scroll-lag (slow performance) on Safari 5.0.2?

It seems Chrome has an open bug on an older version:

http://code.google.com/p/chromium/issues/detail?id=95164

Airbnb discussed the problem recently, and actually changed their final design because of it:

http://nerds.airbnb.com/box-shadows-are-expensive-to-paint

There's a group of people recently gaining an interest in programmatically testing CSS performance. Here's a bookmarklet you can use to start your own testing:

http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

In the meantime, you're right that hacking border-image is an option. Check it out here:

Scroll Lag with CSS3 box-shadow property?

Answer 2

It may not be the box-shadow particularly, maybe something else in your app just consumes way too much resource and box-shadow just happens to be the cherry on top.

Nevertheless, I can confirm that box-shadow on overly long or large elements causes performance issues. I work for a certain drag'n'drop form builder and tried setting box-shadow on a 900px x 1000px div and the scrolling started lagging up immediately. Ours is a very ajax heavy web-app, so others might afford to get better results, but still, I think this is a valid example.

So I went old-school and created images instead. I think the most proper way to get image-box shadows working without too much image load is to have an element with a fixed width.

What I did was three image slices. One slice from top to just beneath top corners, one from the bottom to just above the bottom corners and one thin slice from the middle which I used on a div as background image with a repeat-y so that I can dynamically change to divs height fit the users page.

You can slice even more to fit any box but it becomes too much(at least 5 extra images and 8 extra divs to be precise) for a box-shadow imo.