1428693 - svg animation freezing unless moving mouse

Status: VERIFIED FIXED

(Core :: DOM: Animation, defect)

Description

[nefiga]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20180103231032

Steps to reproduce:

https://jsfiddle.net/zt3mzfdu/


Actual results:

I am on firefox 57.0.4 on macbook pro OS 10.13.2
I would expect the svg to at least animate badly. It doesn't even animate unless I move my mouse over the viewport iframe. If i move my mouse, it appears to render frames, but when I stop it ceases to animate again.

It appears that the animation functions normally if:
1) I remove the overflow-y: auto rule;
OR, 2) I remove the translate3d rule;
OR, 3) I change the translate3d rule to use pixels instead of percent;


Expected results:

It animates the svg, even poorly.

Comment 1

[nefiga]

Slightly simplified jsfiddle:

https://jsfiddle.net/qwru0yae/

Comment 2

[Alice0775 White]

also produced the issue on win10

Comment 3

[Alice0775 White]

regressed since version 49.

Comment 4

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=5613020111ba45dda63615dfa5a791f7ad1a8e4a&tochange=fe7766352e3eb84c9da204d866e8a25d814a09d8

regressed by Bug 1166500

@:hiro,
Your bunch of patch seems to cause the regression, can you look into this?

Comment 5

[Alice0775 White]

@:hiro,
Your bunch of patch seems to cause the regression, can you look into this?

Comment 6

[Alice0775 White]

workaround
setting dom.animations.offscreen-throttling = false

Comment 7

[Hiroyuki Ikezoe (:hiro)]

Attachment: A minimized test case

Didn't bug 1337994 fix this test case?

Comment 8

[Alice0775 White]

also reproduced on version 55.
so, the  bug 1337994 seems to do not fix this.

Comment 9

[Hiroyuki Ikezoe (:hiro)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=2b7bca1c33731666579efaf148e3109eba19c623

Comment 10

[Hiroyuki Ikezoe (:hiro)]

I found this patch in my patch queue. :)

https://treeherder.mozilla.org/#/jobs?repo=try&revision=85c5e91bf5a9decd349169065ebfea7c3fa55f72

Comment 11

[Hiroyuki Ikezoe (:hiro)]

Attachment: Bug 1428693 - Use GetOverflowAreasRelativeToSelf() instead of GetOverflowAreas() for scrollable parent.

Because the scrollable parent might be transformed by its ancestors.

Review commit: https://reviewboard.mozilla.org/r/224900/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/224900/

Comment 12

[Matt Woodrow (:mattwoodrow)]

Comment on attachment 8955957 [details]
Bug 1428693 - Use GetOverflowAreasRelativeToSelf() instead of GetOverflowAreas() for scrollable parent.

https://reviewboard.mozilla.org/r/224900/#review230876

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8ff883d778bf
Use GetOverflowAreasRelativeToSelf() instead of GetOverflowAreas() for scrollable parent. r=mattwoodrow

Comment 15

[Eliza Balazs [:ebalazs_]]

https://hg.mozilla.org/mozilla-central/rev/8ff883d778bf

Comment 16

[Ryan VanderMeulen [:RyanVM]]

Ugh, wish this would have landed a week or so ago so we could have gotten it into 59 still. That said, calling 59 wontfix since this is an old issue we've been shipping for awhile.

Comment 17

[Md Maruf Rahman]

I have reproduced this bug with Nightly 59.0a1 (2018-01-07) on Windows 10, 64 Bit!

This bug's fix is verified with latest Beta!


Build ID   : 20180402175344
User Agent : Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0

Comment 18

[Hiroyuki Ikezoe (:hiro)]

Thank you Mohammad!

Comment 19

[Cristian Fogel [:cfogel]]

Reproduced the bug on Nightly 59.0a1 (2018-01-07) under Windows 10 x64. 

Bug fix is verified with: Firefox 60.0b15 and latest Nightly 61.0a1(2018-04-25).
Tests were performed under Windows 10x64, MacOS X 10.10.5 and Ubuntu 16.04x64.

Comment 20

[itsmarkdarling]

This is happening to me on this site: https://www.smashingmagazine.com/2015/09/creating-cel-animations-with-svg/

I am using Firefox 93.0 64 bit on Macbook Air M1 (2020) running Big Sur (ver 11.6).

SVG animations flash the same frame unless mousing over and moving the mouse.

Comment 21

[Brian Birtles (:birtles)]

Hi itsmarkdaling. Thank you for mentioning this.

Are you able to file this as a separate bug? The animation from smashingmagazine also flashes for me while the test case from comment #0 (https://jsfiddle.net/zt3mzfdu/) works correctly so I believe this is a separate bug.