655786 - extremely slow scrolling with css constructed patterns

Status: RESOLVED WORKSFORME

(Core :: Graphics, defect)

Description

[Asa Dotzler [:asa]]

The site http://leaverou.me/css3patterns/ uses CSS to construct some very cool patterns but it slows scrolling down to crazy bad.

Tested on Windows, Mac, and Linux.

Comment 1

[Boris Zbarsky [:bzbarsky]]

A profile on Mac shows:

 34% spent painting backgrounds (all of it gradient stuff),
 29% painting box shadow outers (most of this is doing the box blurs,
     unsurprisingly)
 24% painting box shadow inners (again, mostly blurs).

Comment 2

[Timothy Nikkel (:tnikkel)]

Each circle containing a pattern is created using a 150 px border radius. Each circle also has 4 different box shadows. The large border radius effectively disables some of the optimizations we have for box-shadow.

Comment 3

[Boris Zbarsky [:bzbarsky]]

Hmm.  Ok, but are we just repainting the new things on scroll?  Or everything on the page?

Comment 4

[Timothy Nikkel (:tnikkel)]

Looks like we are repainting the entire page on scroll. And that seems to be caused by the fixed position div that contains the facebook and twitter widgets for some reason.

Comment 6

[Théo Chevalier]

Running this page in safe mode seems to reduce significatively the latence. Return on the tab takes just less than 1 second in safe mode, whereas it takes between 5 and 10 seconds in normal mode.(Tested with a fresh profile on Nightly 32bits 20111004, on Win 7)

Comment 7

[Bas Schouten (:bas.schouten)]

(In reply to Théo Chevalier from comment #6)
> Running this page in safe mode seems to reduce significatively the latence.
> Return on the tab takes just less than 1 second in safe mode, whereas it
> takes between 5 and 10 seconds in normal mode.(Tested with a fresh profile
> on Nightly 32bits 20111004, on Win 7)

This could be hardware acceleration related, in theory.

Comment 8

[WildcatRay]

(In reply to Bas Schouten (:bas) from comment #7)
> (In reply to Théo Chevalier from comment #6)
> > Running this page in safe mode seems to reduce significatively the latence.
> > Return on the tab takes just less than 1 second in safe mode, whereas it
> > takes between 5 and 10 seconds in normal mode.(Tested with a fresh profile
> > on Nightly 32bits 20111004, on Win 7)
> 
> This could be hardware acceleration related, in theory.

A couple of us turned off hardware acceleration and then navigated to the page. (I specifically cleared the browser cache before doing so.) The page loaded much quicker than with HA on.

Comment 9

[Mayank Bansal]

Profile on win7x64 and HWA on :  http://people.mozilla.com/~bgirard/cleopatra/#report=0d7c964e4d70af46f92c2a242a5379984d1838ce    99% GPU usage.   extremely janky.  

HWA off :  http://people.mozilla.com/~bgirard/cleopatra/#report=0594fdde9748383f0f46e665b5c46e6f17842a49     Janky only in while scrolling.

Comment 10

[Gregory Pappas [:gregp]]

Mayank, how does this perform for you?