754475 - Poor css transform transition performance

Status: RESOLVED WORKSFORME

(Core :: Graphics, defect)

Description

[Johan Larsson]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:15.0) Gecko/15.0 Firefox/15.0a1
Build ID: 20120509040219

Steps to reproduce:

Go to http://beta.svtplay.se/ in a browser window that is wider than 1024px and click the left/right arrow for the carousel to invoke the transition.


Actual results:

The scaling + opacity animation is not running at an acceptable framerate when compared to Chrome (19.0.1084.46 beta). It's noticeably slower.


Expected results:

The animation in Firefox should be as smooth as it is in Chrome (19.0.1084.46 beta).

Comment 1

[Matthias Versen [:Matti]]

Is this OS X specific ?
This looks fast enough for me with Mozilla/5.0 (Windows NT 6.1; rv:15.0) Gecko/15.0 Firefox/15.0a1 SeaMonkey/2.12a1

Can you please post the graphic section from about:support ?

Comment 2

[Paul Rouget [:paul]]

Fast here with Linux.

Both Linux and Windows have some kind of content acceleration (xrender & D2D). So yes, that might be Mac specific.

Comment 3

[Johan Larsson]

This is the Graphic section from about:support on both of my macs:

iMac:
  
Vendor ID: 0x10de
Device ID: 0x 609
WebGL Renderer: NVIDIA Corporation -- NVIDIA GeForce 8800 GS OpenGL Engine -- 2.1 NVIDIA-7.18.11
GPU Accelerated Windows: 1/1 OpenGL
AzureBackend: quartz


Macbook Air:

Vendor ID: 0x8086
Device ID: 0x 116
WebGL Renderer: Intel Inc. -- Intel HD Graphics 3000 OpenGL Engine -- 2.1 APPLE-7.18.11
GPU Accelerated Windows: 1/1 OpenGL
AzureBackend: quartz

Comment 4

[Johan Larsson]

I recorded a video that compares Firefox to Chrome. The quality is quite poor but it gives you an idea about the issue: http://www.youtube.com/watch?v=nqn1d4HpLpQ

Firefox performs quite well but Chrome is just incredibly smooth.

Comment 5

[matus.michalko]

Similar problem occurs here: 

http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index2.html

I started Firefox in safe mode for sure and then investigated following:
 - When using maximized windows (1680 x 1050) native resolution, transition isn’t fluid
 - The smaller the Firefox window, the smoother animation

(Tested on Windows 7, 8 x64) - GeForce 9600 GT, problem also occurred on other deviceswith GeForce  9800 GTX+ and Radeon Mobility HD4500

Comment 6

[Vladimir Agafonkin]

Here's a minimal test case reproducing the issue: http://bl.ocks.org/mourner/4336d03f18c1938df5d9
Compared "Animate with CSS" behavior of Firefox with one in Chrome and Safari. The latter two animate 3000 circles smoothly, while Firefox performance is SO HORRIBLE it hurts.

Comment 7

[Chris Lord [:cwiiis]]

The site in comment #0 runs smoother in Firefox than Chrome for me (release builds of both, on Linux).

The test-case in comment #5 does indeed run terribly in Firefox though, probably because it's animating top/left and then perhaps hitting bug 1009693? I'm going to mark it as dependent and we should re-test once it's fixed.

Comment 8

[Chris Lord [:cwiiis]]

It might also be worth checking that no reflows are happening too (which would be a regression of bug 157681, I think?)

Comment 9

[Chris Lord [:cwiiis]]

Ok, didn't read this thoroughly enough... I don't know if comment #5 is just an unrelated thing to this bug, which is a Mac-specific problem? Though comment #4 makes it sound like it might be fixed (and then I expect any further performance difference to be solved by bug 927349 and bug 1071275.

Let's wait for gfx to settle down a little and needinfo the reporter to re-test.

Comment 10

[Vladimir Agafonkin]

What do you think about the test case in comment #6?

Comment 11

[Chris Lord [:cwiiis]]

(In reply to Vladimir Agafonkin from comment #10)
> What do you think about the test case in comment #6?

Sorry, when I said comment #5, I actually meant comment #6.

Though I just took another look - during painting, it's repainting the entire scene, and it's doing it because it's animating with margin-left and margin-top. I really doubt we can make that fast in a generic way, I expect this is better in Chrome purely down to better drawing performance. I don't think this is a meaningful test, or a representation of any of the real-world cases cited in this bug.

Comment 12

[Chris Lord [:cwiiis]]

Sorry, I'm strapped for time today and I'm clearly not looking closely enough. I can see it's using transforms, but the elements aren't getting layerised. I'll look at this more closely later to see if there's anything obviously wrong.

Comment 13

[Vladimir Agafonkin]

Sounds good, thanks so much for looking into this!

The real-world use case here is performance of animated layers like markers and popups in Leaflet maps. http://leafletjs.com It's smooth in Chrome even with a big amount of layers (e.g. 500 markers), but very stuttery in Firefox, and I'm not sure why.

Comment 14

[Chris Lord [:cwiiis]]

cc'ing Matt Woodrow in case there's any obvious comment to be made about perf with lots of tiny layers.

Comment 15

[Peter Bonjernoor]

Not necessarily 'a lot of tiny' layers - I have an animated wordcloud widget that performs very poorly even with a mere 50 words. Both Chrome and IE render it fluidly. If I go to 100 words, a 1s transition renders in a 3 or 4 step animation.

Comment 16

[Chris Lord [:cwiiis]]

I don't think there's anything I can do about this in any reasonable time, but all the examples seem to perform ok atm... Removing n?me on the bug, but if someone can update this bug with some examples and more information, I can try to make sure it gets appropriate attention.

Comment 17

[Gregory Pappas [:gregp]]

Performs well now.