279890 - Slower response with CSS opacity set below 1

Status: RESOLVED WORKSFORME

(Core :: General, defect)

Description

[Jasper Op de Coul]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

The page at http://v2archive.v2.nl/~portal2004/moz-slow.html is really slow and
unresponsive, sometimes firefox get's so unresponsive it asks me to force-quit.
Using the scrollbar takes a long time, while the processor runs at 100% all the
time.

Older versions of Firefox don't have this problem. It seems to occur when
mozilla revision version is greater than 1.6, So try to load the page with an
older version (< rv1.7) and there are no problems at all.

The page uses the following css style:
<style type="text/css">
/* safari1.2 bug default everything to opaque */
/* safari1.2 needs  opacity:.99 instead of 1 */
body * { filter:alpha(opacity=100);-moz-opacity:1;opacity:.99;-khtml-opacity:1;  }*/
</style>

It seems specifying opacity as a float (.99) doesn't work well with new versions
of moz/firefox. Maybe this is considered bad web design, however I post this as
a bug, because old firefox/mozilla versions have no problems with this, only new
versions have. 


Reproducible: Always

Steps to Reproduce:
1. start mozilla/firefox rv version > 1.6
2. go to http://v2archive.v2.nl/~portal2004/moz-slow.html
3. try using the scrollbar

Actual Results:  
Mozilla is real slow with loading the page, scrolling is very jerky and
processor intensive, mozilla can become unresponsive

Expected Results:  
Render the page in the same time as older browser versions do, which should be
the same time it takes to load http://v2archive.v2.nl/~portal2004/moz-normal.html
(this is the same file without the CSS:opacity)

This behovior is shown on all platforms (tested on Linux,Mac,Windows), using
gecko engine revision > 1.6

Comment 1

[Jasper]

I have a very similar problem using Mozilla Firefox 1.0.4 (Mozilla/5.0 (Windows;
U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4). Although I
can't check the page the original poster referenced, so I can't judge how
similar it is.

When using tables and giving different cells different opacities (based on
:hover in my case, but I'm not sure that's a requisite) drawing becomes very
slow (and somehow different when using borders) when some cells have an opacity
< 1 and some (one?) cell(s) have opacity 1. When all cells have opacity < 1 or
opacity 1 nothing seems to be wrong.

I have attached a test document (opacitytest.html) to illustrate the problem.
Opacitytest2.html is the same document but with all non-hover cells using the
"default" style (so probably opacity 1), please note the difference (compared to
opacitytest.html) in speed as well as the difference in handling the size of
cells with borders.

Comment 2

[Jasper]

Attachment: Test file with lots of cells with opacity < 1

Comment 3

[Jasper]

Attachment: Test file with nearly all cells having opacity 1

This demonstrates the difference in speed and handling of sizes of cells with a
border (when compared to opacitytest.html).

Comment 4

[hilton.jon]

Yep I've seen this problem too.

Specifically when accessing the forums on www.asp.net

e.g. one of my posts on there http://forums.asp.net/thread/1431418.aspx

If you try to access the above in Firefox it slows to a grinding halt, becomes very unresponsive and I have to force Firefox to quit.

Comment 5

[MS]

same problem with lightbox/thickbox like scripts

http://www.huddletogether.com/projects/lightbox/
http://jquery.com/demo/thickbox/#

this makes them unusable on FF. (could be Linux only problem, I doesn't remember to have this issue on WinXP box)

Comment 6

[Dave Rolsky]

This continues to be a problem in Firefox 2 on Linux today. I'm using FF 2.0.0.4 on Ubuntu Feisty.

Comment 7

[Steven]

This bug is still present in firefox 3.0.4 (Linux Ubuntu 8.04), as well as epiphany, but not seamonkey 1.1.12

I also noticed css rendering is pretty slow when I use a table (40 rows, 9 columns), but with opacity set at 0.82 in the css file, it's just unusable:
total CPU skyrockets to 50% (dualcore... that's 100% on a single core actually), whole system is seems unresponsive for about 5 seconds.

The html file with the table is about 13kb, loads instantly when no css is applied, notably slower with css, and incredibly slow using the opacity.

Comment 8

[LJ Wong]

In FF 3.1 beta 2, it's still slow on my P4 computer, though it's "ok" speed on my dual core computer in office.

HOWEVER, the main point is, when I feel it's slow on my P4, on the same machine, both IE and Google Chrome load the same page very quickly.

May want to fix this bug. I am seeing more sites utilizing opacity now than before. And should be increasing in the future, especially in personalized blogs, which we all like to go to.

Comment 9

[LJ Wong]

Sorry to spam... I missed one point. It's slightly slow on "loading", but it's very slow when you're scrolling.

Comment 10

[Tom Fotherby]

This bug bit me last week. I have put up a page which reproduces the issue, i.e causes Firefox 3.6 to crash on Ubuntu 9.10 (64bit) on my laptop (2GHz Core2 Duo, 2GB RAM):
http://www.bitvolution.com/demo/firefox36opacitybugtest.html

The page works fine in Chrome and IE and Firefox 3.6 on Windows.

I have also blogged about the issue:
http://www.bitvolution.com/blog

Comment 11

[Steven]

It appears to be fixed for me on a 32 bit system, running Debian Lenny.
Tried your page in both Firefox 3.6 (downloaded Linux binary from firefox.com) and Swiftfox 3.6 (recompiled firefox for specific CPU's).
None of these crash, or even slow down when opening the test page provided by Tom.
It's a desktop system running a quadcore Q9550 running at 2.83 Ghz and 4GB ram.

Comment 12

[Matthias Versen [:Matti]]

This is fast for me with Mozilla/5.0 (Windows NT 6.1; rv:13.0a1) Gecko/20120215 Firefox/13.0a1 SeaMonkey/2.10a1