CSS box-shadow Can Slow Down Scrolling
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.
