CSS box-shadow Can Slow Down Scrolling

Nov 11, 2011 · 3 min read

By Ross Allen

Working on one of the Chromebooks Google lets you borrow on Virgin America flights, I noticed scrolling down the page on my airbnb.com dashboard was much slower than on my normal laptop. I chalked it up to weak Chromebook hardware, but other sites were scrolling just fine. box-shadow had caused slow scrolling on our search results page before, so I did some investigation.

I used Chrome’s Timeline tab to see the duration of paint events on the page. Before each test I forced a garbage collection and scrolled to the same window position using window.scroll(0, 140). Then I clicked the down arrow in the scroll bar twice, a 40px-scroll per click, and recorded the paint times.

10px box-shadow blur-radius (original stylesheet value) = 3 paint events per 40px scroll

To see if box-shadow was slowing down scrolling, I cut the blur-radius in half. The scrolling was far smoother, and the numbers showed why: paint events were taking half as long, which meant more paint events per time period.

5px box-shadow blur-radius = 3–4 paints per 40px scroll

Since box-shadow was the obvious offender, I tried taking it out entirely.

0px box-shadow blur radius = 2 extra paint events in the same amount of time, much smoother scrolling

And then I set it to something huge. The Chromebook did not like painting a 300px blur-radius. It took 2 full seconds of paint time per scroll arrow click!

300px box-shadow blur radius= SO SLOW!

Final Product Changes

We dropped the blur-radius for the boxes on airbnb.com/dashboard to 3px and added a 3px offset to get a cleaner look that didn’t tear up performance for devices with less processing power.

After (3px blur-radius, 3px offset)
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.15);

Before (10px blur)
box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);

Why is this important? I have like 3 Chromebook visitors.

Your Chromebook audience is probably pretty small, but Chrome is built on WebKit just like the iOS and Android browsers. If CSS is hurting performance on a Chromebook it’s likely hurting it for mobile WebKit users visiting your full site too.

In case you try this at home, this is the Chromebook I was using: Google Chrome 14.0.835.204, Platform 811.154

Read it in Portuguese: http://blog.rafaelcavalcante.com/front-end/cuidado-o-box-shadow-pode-prejudicar-a-rolagem-da-sua-pagina/

Check out all of our open source projects over at airbnb.io and follow us on Twitter: @AirbnbEng + @AirbnbData

Originally published at nerds.airbnb.com on November 11, 2011.

Airbnb Engineering & Data Science

Creative engineers and data scientists building a world…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store