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
Read it in Portuguese: http://blog.rafaelcavalcante.com/front-end/cuidado-o-box-shadow-pode-prejudicar-a-rolagem-da-sua-pagina/
Want to work with us? We're hiring!