963264 - [MAC] Animated GIF inside a table-cell element causes extreme CPU usage

Status: NEW

(Core :: Layout: Tables, defect, P4)

Description

[Evgueni Naverniouk]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:28.0) Gecko/20100101 Firefox/28.0 (Beta/Release)
Build ID: 20140123004002

Steps to reproduce:

On my web page I have a <span> tag which has the following CSS:

background: url(my_animation.gif);
display: table-cell;

I'm using Firefox Aurora 28.0a2 (2014-01-23) on Mac OSX 10.8.4.


Actual results:

When viewing this page, my CPU usage spikes to 80-90%. If I remove either the background or the display values (via development tools), the CPU jumps down to a reasonable 5-10%.


Expected results:

Having an animated GIF inside a table-cell element should not affect the CPU as much as it does.

Comment 1

[Liz Henry (:lizzard) (relman/hg->git project)]

Evgueni,  can you attach an example page where this happens -- a reduced test case? 
Or, a link to your page would also be helpful. Thanks!

Comment 2

[Evgueni Naverniouk]

Sure thing. Here is a test case: http://jsfiddle.net/2ZRS5/5/

Several things to note:

- Running this makes my Mac OSX CPU (firefox app) jump to around 30-60% usage.
- To further increase CPU usage you can click the button to generate some additional elements under the GIF. This will get you to 100%. For some reason having additional elements on the screens seems to increase the problem.

If you hide the GIF, or change the .table-cell element to another display type, your CPU usage will drop immediately.