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.
About Ross Allen
Awesome detective work Ross! I actually think they look even better with the smaller blur-radius plus offset so that was win-win. Out of curiosity, how do you trigger garbage collection in chrome?
Hey Ross, this article is very interesting. Can i translate it to brazilian portuguese? If so, please let me know.Thanks for sharing this, it’s quite usefull. We’re using parallax effect with drop shadow on most projects here where i work and now i realized that the shadow important if i someday need to impove the performance.Thanks!
We also found this issue to be particularly bad on android phones (even android 2.3). The situation only gets worse the more elements you have with box-shadow applied.
Box-shadow isn’t the issue, its alpha opacity within the rgba that causes the issue. Chrome doesn’t cache rgba correctly. You should be able to get better results by removing the opacity.
@Brian The little garbage bin icon in the Timeline tab forces a garbage collection. http://cl.ly/2u2n2Y1Q2i0G2z080Q26
@rafelcavalcante Feel free to translate!@loopj I have a Nexus S and tried scrolling the dashboard on my phone. The scrolling was pretty nasty.@filipearaujo Another one of our engineers mentioned alpha as well. I tried testing on my laptop, but this thing has too much processing power to show a difference. I will try this test again on a Chromebook and update the post.
I’ve got a Nexus S, too, and find the snaggy scrolling on some sites infuriating. Unusable in some cases. Opera Mobile and Mini are much better. This would suggest it’s a Webkit problem. Given the crazy rise in Android’s Webkit browser popularity (see http://j.mp/vPZrKx), this is a serious consideration for designers, so thanks for shedding some light on the cause.Big question in my mind now is: how does Android 4.0 (Ice Cream Sandwich) fare? Anyone know? It’s supposed to better support hardware acceleration (which I’m guessing Opera already does, given its silky scrolling characteristics).
I ran into that issue a few months back with drag and drop on some elements with a gradient (and later a box shadow) on chrome. I ended up changing the class during the drag operation which switched to a solid background during the movement.
Hey Ross, translation done
Check it out: http://blog.rafaelcavalcante.com/front-end/cuidado-o-box-shadow-pode-prejudicar-a-rolagem-da-sua-pagina/Thanks 