418948 - High CPU usage and slowdown when scrolling page with transparent element backgrounds on fixed page background

Status: RESOLVED INCOMPLETE

(Firefox :: General, defect)

Description

[CodeCat]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9b3) Gecko/2008020514 Firefox/3.0b3
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9b3) Gecko/2008020514 Firefox/3.0b3

When scrolling a page that uses a transparent background on some elements with a fixed background on the body of the page, the scrolling is tremendously slow and sluggish, and CPU usage shoots up. I'm not sure what the exact circumstances of the problem are, but these are the circumstances in which I can reproduce it.

Reproducible: Always

Steps to Reproduce:
1. Visit the URL given.
2. In the very bottom right corner of the page, use the 'Forum theme' drop-down selection box to change the theme to 'Spaced out'.
3. Scroll the page and look at CPU usage as well as what is rendered in the browser window.
Actual Results:  
The screen updates very slowly and Firefox responds very slowly to input, as it is using a lot of CPU resources (up to 90% on my system) to render the screen while it is scrolled.

Expected Results:  
Should render the page much faster, with no noticeable lag. Compare the scroll speed and CPU usage when using other themes on that site, such as the default 'Red'n'Black' skin.

Computer is an AMD Athlon XP 2600 with 1.5 GB RAM. Using default Firefox theme.

Comment 1

[Bernhard Schilling]

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9b5pre) Gecko/2008031109 Minefield/3.0b5pre
i can confirm this on some other sites, www.computerbase.de for example. Scrolling is really choppy there with Firefox 3, no Problem with Firefox 2. Smooth Scrolling or not makes no difference.

Comment 2

[mmortal03]

duplicate of Bug 273457 or Bug 124150?

Comment 3

[MZ (watervole02)]

(In reply to comment #2)
> duplicate of Bug 273457 or Bug 124150?
> 

This bug seems to be firefox 3 specific, while those two are older.

BTW, I can confirm the bug as well.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9pre) Gecko/2008053006 Minefield/3.0pre

Comment 4

[CodeCat]

It's not a duplicate of those bugs. The site in question worked fine until I started using FF3, so this is a new bug.

Comment 5

[Schot]

I'm also having this problem.  Scrolling on my site is a horror...

http://darkmatters.org

Just moments ago I changed my background from fixed to none which largely resolves the problem though now there is tearing when I scroll.  In order to see the problem I have apply fixed to my background using a web dev tool.  Then try scrolling.  It's very very sad.  

Comment 6

[Roberto Ramirez]

Consider this bug confirmed again.

The worst offending site for me is ign.com, by far.  The page is almost
unusable when viewed with Firefox 3 running on Windows Vista, although it loaded fine in the current IE and the previous Firefox.  CPU usage regularly shoots to 70% with dual-core processors and maxes out completely on single core...but some report it works fine on Windows XP, even with FF3.  Hmm...

Comment 7

[Karel Jára]

I can confirm this even on other sites.

Let’s compare with the bugs (I’ve commented more on the first of them.):

Bug 480806 – Scrolling is very slow When the page is made a full zoom.
Bug 483394 - Very slow scrolling/rendering
Bug 452714 – W3C’s page scrolls very slowly

Comment 8

[Heike]

Same problem (transparent background, with or without a fixed background and pictures on the site) slow scrolling, tearing pictures and so on.

What things make going much better for me was to set the graphics hardware acceleration back, (desktop properties settings) move the slider one or two notches to the left.

Can there be a problem between some (older?) video drivers and the graphics-renderingengine of firefox?

Comment 9

[RNicoletto]

WFM. Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8 

Computer is a Compaq 6910p.

Comment 10

[Heike]

Heureka!
Just now I found the ultimate solution for this problem (it exists still in FF 3.51!) on my own website: 
if there is set "overflow:auto" for any container (div, p, etc.) in the range of background-pictures and/or transparency this scrolling-tearing-problems will appear.
The answer is "overflow:visible" and all trouble is gone and everything works!

Comment 11

[Tyler Downer [He/Him]]

Does this still happen with Firefox 3.6.6 or alter in a fresh profile? BTW, retained layers will be landing on mozilla trunk shortly, which will dramatically increase scrolling speeds.

Comment 12

[Heike]

Without setting the graphics hardware acceleration back (slider 2 notches to the left), the same scrolling-problem still exists with Firefox 3.6.8. (using 90% CPU resources to render the screen while it is scrolled)

I have to say that my computer (with WindowsXP) is 7 years old and the graphic card may be too weak. But the problem does not appear at all with Opera, Chrome and Safari. In IE8 scrolling is a bit slow and CPU-usage is tolerable.

Comment 13

[Tyler Downer [He/Him]]

Heike, please download a firefox trunk build and see if you still see a problem. ftp://ftp.mozilla.org/pub/firefox/nightly/latest-trunk/. If it still happens, please open a new bug.

Comment 14

[Heike]

Unfortunately it still happens, extremely on websites that are made with many pictures and graphical design, like this two

http://www.tierheim-heppenheim.de/
http://www.tierheim-lauterbach.de/TH/Seite/Hunde

and the website ign.com, which was mentioned in Comment 6.

Comment 15

[RNicoletto]

(In reply to comment #14)
> Unfortunately it still happens, extremely on websites that are made with many
> pictures and graphical design, like this two
> 
> http://www.tierheim-heppenheim.de/
> http://www.tierheim-lauterbach.de/TH/Seite/Hunde

I can reproduce with Firefox 4b2 on Windows XP and Smooth Scrolling ON.
I cannot reproduce with Smooth Scrolling OFF.