388259 - Big background images slows down page rendering too much

Status: RESOLVED DUPLICATE of bug 328319

(Firefox :: General, defect)

Description

[diz]

User-Agent:       Mozilla/5.0 (X11; U; FreeBSD i386; en-US; rv:1.8.1.4) Gecko/20070710 Firefox/2.0.0.4
Build Identifier: Mozilla/5.0 (X11; U; FreeBSD i386; en-US; rv:1.8.1.4) Gecko/20070710 Firefox/2.0.0.4

When rendering digg.com , my browser freezes for a moment, and it's very jerky when I scrolling the page. It's happening even when I switch tab from and to digg.com.

Reproducible: Always

Steps to Reproduce:
1. Go to digg.com
2. Try to scroll page up and down
3. Try to switch tabs from digg.com and back
4. Try to move other window over Firefox window with digg.com opened.
Actual Results:  
Scrolling is very jerky. Moving other windows over Firefox window with digg.com site opened is very jerky too.

Expected Results:  
Everything should run smoothly, without jerks. :)

Researched problem a little bit myself. It boiled down to be a problem with rendering a specific image on digg.com: http://digg.com/img/main-back.gif

File size is just 4K, but image dimensions rather huge: -- 2006x600 pixels.

When I disable it with Adblock Plus, problem disappears and everything run smoothly.

And here is snippet from http://digg.com/css/30/global.css, which render the image:

#wrapper {
    background: url(/img/main-back.gif) 0 0 no-repeat;
    padding: 8px 0 0 15px;
    min-height: 500px;
} /*IE6*/

#contents {
    clear: both;
    padding: 0 15px 15px 0;
    margin-top: 7px;
    background: url(/img/main-back.gif) 100% 0 no-repeat;
}

Comment 1

[Boris Zbarsky [:bzbarsky]]

Is this a problem in a trunk build?  All this stuff (painting, to be exact) got changed a good bit on trunk.

Comment 2

[Jim Jeffery not reading bug-mail 1/2/11]

(In reply to comment #1)
> Is this a problem in a trunk build?  All this stuff (painting, to be exact) got
> changed a good bit on trunk.
> 

I don't seem to be having any issues in trunk.  But then again, I'm not sure what huge background image he is referring to either.  I click the link, and get just a white, blank page.  

I see no lag, or scroll issues here on my machine, running Vista HP.
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9a7pre) Gecko/2007071513 Minefield/3.0a7pre Firefox/3.0 ID:2007071513

Comment 3

[diz]

(In reply to comment #1)
> Is this a problem in a trunk build?  All this stuff (painting, to be exact) got
> changed a good bit on trunk.
> 

Firefox was built from FreeeBSD ports: 

portinstall www/firefox

It downloaded source file:
MD5 (firefox-2.0.0.4-source.tar.bz2) = 99c14794976b2532addfcd2d836c6bb2

Comment 4

[diz]

(In reply to comment #2)
> (In reply to comment #1)
> > Is this a problem in a trunk build?  All this stuff (painting, to be exact) got
> > changed a good bit on trunk.
> > 
> 
> I don't seem to be having any issues in trunk.  But then again, I'm not sure
> what huge background image he is referring to either.  I click the link, and
> get just a white, blank page.  
> 
> I see no lag, or scroll issues here on my machine, running Vista HP.
> Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9a7pre) Gecko/2007071513
> Minefield/3.0a7pre Firefox/3.0 ID:2007071513
> 

Just click again on the link:
http://digg.com/img/main-back.gif

Then click on that "white, blank page" (it's actually GIF file with transparency) to zoom then right click and choose "Properties". 

And all that jerkyness and lags happens when you open digg.com, which have that GIF image as background for numerous of design elements (to provide rounded corners, I suppose).

In Windows problem doesn't show up.

Comment 5

[diz]

Nevermind, I found PR that better describe my problem.

https://bugzilla.mozilla.org/show_bug.cgi?id=328319

It seems to be problem with stacked transparent backgrounds in Firefox on Linux and FreeBSD, and have nothing to do with image dimension.