CSS box-shadow Can Slow Down Scrolling

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

3px-blur-radius
3px-blur-radius

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

10px-blur-radius
10px-blur-radius

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…

AirbnbEng

Written by

AirbnbEng

Creative engineers and data scientists building a world where you can belong anywhere. http://airbnb.io

Airbnb Engineering & Data Science

Creative engineers and data scientists building a world where you can belong anywhere. http://airbnb.io

AirbnbEng

Written by

AirbnbEng

Creative engineers and data scientists building a world where you can belong anywhere. http://airbnb.io

Airbnb Engineering & Data Science

Creative engineers and data scientists building a world where you can belong anywhere. http://airbnb.io

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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