968740 - Slow rAF SVG transform animation performance

Status: RESOLVED WORKSFORME

(Core :: SVG, defect)

Description

[dotnetCarpenter]

Attachment: slowAnimationFirefox.html

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:27.0) Gecko/20100101 Firefox/27.0 (Beta/Release)
Build ID: 20140127194636

Steps to reproduce:

1) Open the attached .html document in Firefox
2) watch the animation of the 10 "icons"
3) Open the same attachment in Chrome or Internet Explorer

The document outputs a frame rate based on how many ticks per second the rAF callback was called. This just gives you an approximation but can not be sorely relied on. For instance, IE gives a low fps even though the animation runs smoothly.


Actual results:

The animation is very jerky in Firefox while running smoothly in Chrome and IE.

The test-case reveals another potential bug in Firefox as all 10 icons are not always rendered. When this happens the fps is very high (around 50fps on my machine) but is of course a bug. Resizing the browser window always make the icons render.


Expected results:

It should run as smoothly as possible. On my machine Chrome v32 has a consistent frame rate of 42 frames per second.

Comment 1

[dotnetCarpenter]

I've filed this bug on request of [:bz] https://bugzilla.mozilla.org/show_bug.cgi?id=802866

Comment 2

[dotnetCarpenter]

Attachment: testcase which shows slow rAF animation on windows 7

I unintentionally left an alert statement in the previous testcase. This update uses console.log instead.

Comment 3

[Robert Longson [:longsonr]]

There's a bug with transform changes that exists in Firefox <= 27. Have you tried this on trunk or firefox 28.

Comment 4

[dotnetCarpenter]

Unfortunately http://www.mozilla.org/en-US/firefox/aurora/all/ doesn't give my any links that works. E.g. https://download.mozilla.org/?product=firefox-28.0a2&os=win&lang=en-US is dead

Comment 5

[dotnetCarpenter]

And the beta channel has yet to update to 28.

Comment 6

[Daniel Holbert [:dholbert]]

You're unlucky enough to be trying to download Aurora during the time-window when IT is switching the builds over, it seems. (variant of bug 950119)

You can grab a build directly from FTP, here:
 http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora/
or if you don't want en-US, this has the other localizations:
 http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora-l10n/

Comment 7

[Daniel Holbert [:dholbert]]

(I filed bug 968901 on the issue with the download links on aurora/all/. Thanks for bringing it up; hopefully we can get that resolved so that other folks don't run up against that.)

Comment 8

[dotnetCarpenter]

Thanks for the link. BTW I really like the new Firefox look and feel.

The good news is that all the icons are rendered every time. <strike>In 27 it happens quite often that some or almost all icons are missing.</strike> - I no! It just happened again. I'm attaching a screen shot. This time resizing the browser window doesn't help.

The other good news is that the animation runs much more smooth.
The bad news is, that my actually web site (and the reason for this bug report) isn't showing any substantial improvements. http://www.demægtigevikinger.dk/prototype/v0.8/

I'm not sure how I can get the test-case to match my real case. I've omitted the svg.js library and other stuff that I have on my site and in 27 that didn't make any difference. Whereas now the test-case runs smoothly in aurora. But alas, not on my site.

Comment 9

[dotnetCarpenter]

Attachment: firefox_svg_rendering.png

When running the test case multiple times in aurora (29.0a2) some icons are missing. Others are only half rendered.

Comment 10

[dotnetCarpenter]

@dholbert thanks for caring. 404's are frustrating.

I got a question for Firefox devs. Would the test case be better if it was running the animation in a loop? I'm thinking it's easier to step through code when the initialization is done and you can break out of a debugging session and do it again at another code line without refreshing the browser. Makes sense?

Comment 11

[Daniel Holbert [:dholbert]]

(In reply to dotnetCarpenter from comment #8)
> The good news is that all the icons are rendered every time.  -
> I no! It just happened again.

FWIW, this also happened to me the first time I loaded the testcase, in Nighlty -- only one icon opened. (no performance issues, though)  It didn't happen on subsequent reloads/shift-reloads, though.

Would you mind filing a separate bug about that?

> The other good news is that the animation runs much more smooth.

[...the animation in the attached testcase is more smooth, you mean? Yay!]

> The bad news is, that my actually web site (and the reason for this bug
> report) isn't showing any substantial improvements.
> http://www.demægtigevikinger.dk/prototype/v0.8/

FWIW, the animations there are nice and smooth for me (on Linux, using Firefox Nightly).

Comment 12

[Daniel Holbert [:dholbert]]

(In reply to dotnetCarpenter from comment #10)
> I got a question for Firefox devs. Would the test case be better if it was
> running the animation in a loop?

Possibly, yeah.

> I'm thinking it's easier to step through
> code when the initialization is done and you can break out of a debugging
> session and do it again at another code line without refreshing the browser.
> Makes sense?

Sure. (More importantly, at this stage in the game, it's easier to tell whether you can reproduce or not when the animation is continuously running rather than running in a single brief shot.)

Comment 13

[dotnetCarpenter]

Well, I can on my old thinkpad running win7. If it's possible to upload a recording, I'll do that.

Comment 14

[dotnetCarpenter]

Attachment: testcase which shows slow rAF animation on windows 7

Changed to loop animation with a touch of randomness.

Comment 15

[dotnetCarpenter]

I tried to record my experience. It is pretty hard to capture the animation with a screen recording but I think it shows the issue. It's especially noticeable in the beginning of the animation. The recordings are made with 32fps. http://dotnetcarpenter.bitbucket.org/slowAnimationFirefox/ - should be up soonish. It takes time to upload 100+MB with git.

Comment 16

[dotnetCarpenter]

(In reply to Daniel Holbert [:dholbert] from comment #11)
> FWIW, this also happened to me the first time I loaded the testcase, in
> Nighlty -- only one icon opened. (no performance issues, though)  It didn't
> happen on subsequent reloads/shift-reloads, though.
> 
> Would you mind filing a separate bug about that?
Yep. I'll do it tomorrow. I think I need to try the sleep thing now.

Comment 17

[dotnetCarpenter]

(In reply to Daniel Holbert [:dholbert] from comment #11)
> Would you mind filing a separate bug about that?
I filed bug 969270, about SVG elements not being rendered.

PS. In case the above doesn't turn into a link, here is the URL https://bugzilla.mozilla.org/show_bug.cgi?id=969270

PPS. I've added machine info to http://dotnetcarpenter.bitbucket.org/slowAnimationFirefox/

Comment 18

[dotnetCarpenter]

I had a chance to test the animation on a slow linux ubuntu 12.04 and the animation runs smoothly. In fact the only machine that seems affected is my Windows 7 machine (info @ http://dotnetcarpenter.bitbucket.org/slowAnimationFirefox/) and my Android Samsung Galaxy Tab II (which is understandable).

I can make a run down of the FPS over time in different browsers, if needed.

But for the inpatient, I suggest watching http://dotnetcarpenter.bitbucket.org/slowAnimationFirefox/slowFFrAF_Chr2.avi (Chrome 32) and http://dotnetcarpenter.bitbucket.org/slowAnimationFirefox/slowFFrAF_FF2.avi (Firefox 29.0a2) videos.

I have not tried to run with the hardware acceleration feature unchecked on windows 7, yet.

But IMHO you should really have some standard hardware machines to test on...

Comment 19

[dotnetCarpenter]

With a frame rate around 20, using Aurora 31.0a2 (2014-05-20), I'm pretty happy with the result. It's still half the FPS as blink but good enough.