CSS box-shadow Can Slow Down Scrolling

About 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 event duration (ms)
>>>
>
>>
>> 122
>>>
>
>>
>> 115
>>>
>
>>
>> 109
>>>
>
>>
>> 123
>>>
>
>>
>> 117
>>>

> Paint area size (px x px)
>
> 1260 x 436
>
> 1260 x 399
>
> 1260 x 399
>
> 1260 x 423
>
> 1260 x 400
>

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 event duration (ms)
>>>
>
>>
>> 58
>>>
>
>>
>> 59
>>>
>
>>
>> 59
>>>
>
>>
>> 56
>>>
>
>>
>> 61
>>>
>
>>
>> 66
>>>

> Paint area size (px x px)
>
> 1260 x 399
>
> 1260 x 423
>
> 1260 x 412
>
> 1260 x 399
>
> 1260 x 407
>
> 1260 x 418
>

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 event duration (ms)
>>>
>
>>
>> 28
>>>
>
>>
>> 29
>>>
>
>>
>> 31
>>>
>
>>
>> 31
>>>
>
>>
>> 32
>>>
>
>>
>> 28
>>>
>
>>
>> 27
>>>
>
>>
>> 40
>>>
>
>>
>> 49
>>>
>
>>
>> 46
>>>

> Paint area size (px x px)
>
> 1260 x 399
>
> 1260 x 410
>
> 1260 x 411
>
> 1260 x 410
>
> 1260 x 400
>
> 1260 x 399
>
> 1260 x 410
>
> 1260 x 411
>
> 1260 x 411
>
> 1260 x 399
>
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 event duration (ms)
>>>
>
>>
>> 943
>>>
>
>>
>> 937
>>>
>
>>
>> 962
>>>
>
>>
>> 1000 (a full second!)

 

>
>>>

> Paint area size (px x px)
>
> 1260 x 418
>
> 1260 x 418
>
> 1260 x 399
>
> 1260 x 437
>

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

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

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

11 comments

About Ross Allen

Speak Your Mind

*

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Comments

  1. Brian Armstrong

    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?

  2. rafelcavalcante

    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! ;)

  3. loopj

    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.

  4. filipearaujo

    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.

  5. Ross Allen

    @Brian The little garbage bin icon in the Timeline tab forces a garbage collection. http://cl.ly/2u2n2Y1Q2i0G2z080Q26

  6. Ross Allen

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

  7. charlesroper

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

  8. martypdx

    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.

  9. rafelcavalcante
  10. Sam Brown

    This is a pretty pro tip, even today, I just saved 20ms paint time by adjusting some box-shadows in a very similar way. You can test it nicely using the continuous paint tool in Canary atm.