Today's Question:  What does your personal desk look like?        GIVE A SHOUT

CSS box-shadow Can Slow Down Scrolling

  Ross Allen        2011-11-13 08:13:48       4,216        0    

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


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

CSS  PERFORMANCE  BOX-SHADOW  TIMELINE  CHROMEBOOK 

Share on Facebook  Share on Twitter  Share on Weibo  Share on Reddit 

  RELATED


  0 COMMENT


No comment for this article.