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
Paint area size (px x px) Paint event duration (ms) 1260 x 436 122 1260 x 399 115 1260 x 399 109 1260 x 423 123 1260 x 400 117
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
Paint area size (px x px) Paint event duration (ms) 1260 x 399 58 1260 x 423 59 1260 x 412 59 1260 x 399 56 1260 x 407 61 1260 x 418 66
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
Paint area size (px x px) Paint event duration (ms) 1260 x 399 28 1260 x 410 29 1260 x 411 31 1260 x 410 31 1260 x 400 32 1260 x 399 28 1260 x 410 27 1260 x 411 40 1260 x 411 49 1260 x 399 46
300px box-shadow blur radius
= SO SLOW!
Paint area size (px x px) Paint event duration (ms) 1260 x 418 943 1260 x 418 937 1260 x 399 962 1260 x 437 1000 (a full second!)
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.
