705490 - jquery fading causes extreme load

Status: UNCONFIRMED

(Core :: Layout, defect)

Description

[Ruben]

User Agent: Mozilla/5.0 (Ubuntu; X11; Linux x86_64; rv:8.0) Gecko/20100101 Firefox/8.0
Build ID: 20111115183813

Steps to reproduce:

i fade out an element with a large partly transparent png inside with jquery.
the large space images on the start page http://www.spacetrace.org
for example http://www.spacetrace.org/pics/online/ships/eagle_trans.png

i use FF8 on ubuntu 11.10

there is another issue on that page when you are logged in as Guest, with the navigationframe, that uses 100 % CPU too, but its another problem. i will post it after this bug


Actual results:

CPU load goes up to 100%


Expected results:

not so much hazzle

Comment 1

[Olli Pettay [:smaug][[e-mail]]]

So how to reproduce the bug? I loaded http://www.spacetrace.org (using Nightly on Linux)
and I see some cpu usage, around 5-10%.
When profiling the fading a bit, it looks like creating display list does take some time
in Gecko, and Xorg process takes quite significant amount of that 5-10% cpu time.

Comment 2

[Olli Pettay [:smaug][[e-mail]]]

Perhaps this is graphics card dependent thing?

Could you try if Nightly gives you the same behavior?
http://nightly.mozilla.org/

Comment 3

[Ruben]

i tried the nightly: 11.0a1 (2011-11-26)

and the fading works much smoother and less CPU

thanks

Comment 4

[Ruben]

although: isn't 30 to 40% still a lot for such a simple fade-effect?

Comment 5

[Ruben]

i have a gforce 5700M

Comment 6

[Ruben]

sorry, mistake, i have this laptop:
Aspire 8930G-844G32BN:  Core 2 Duo P8400 (2,26GHz), NVIDIA GeForce 9700M

Comment 7

[Mounir Lamouri (:mounir)]

Did you try with a fresh profile or with all extensions disabled?

Comment 8

[Ruben]

no, but it is the same on all computers, i know.

maybe fading is so graphically intense to calculate?
or maybe firefox is just not optimized for the jquery fade-effect yet?

maybe it is so problematic, cause the content of the fading div has a halftransparent PNG?

i use 
$('#shippic').fadeOut(2000,...
and
$('#shippic').fadeIn(3000...