Home/ Questions/Q 7163487
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T13:54:40+00:00

I’ve been developing an app specifically for modern browsers and have made very heavy

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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?

    • 0