1883285 - SVG element scale animation via CSS doesn't fire

Status: RESOLVED FIXED

(Core :: SVG, defect)

Description

[Christopher Kirk-Nielsen]

Attachment: firefox-svg-scale-2.mp4

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:123.0) Gecko/20100101 Firefox/123.0

Steps to reproduce:

1. Create an SVG element with a <rect> element.
2. Set a starting scale for the element of 0 with CSS, e.g.: rect { transform: scale(0); }.
3. Assign an animation on the element to reset its transform: rect { animation: reset 1s ease-in-out 1 both; } and @keyframes reset { to { transform: none; }}.

DEMO: https://codepen.io/chriskirknielsen/pen/LYvEqXZ
See the demo, in the left column, nothing animated in. My fix is to use a near-zero scale (this triggers another known bug when using non-scaling-stroke).

Other info:
❌ Tested on Firefox 123.0 and Firefox Nightly 125.0a1 (2024-03-03), both fail.
✅ Tested on Chrome 122.0.6261.94, works as expected
✅ Tested on Safari 16.5.2, works as expected
💻 macOS Ventura 13.4.1 on a 16" MacBookPro (2019)

Actual results:

The animation never fires. The element can "snap" into its final state if you resize the window enough so the SVG element changes size (nothing happens if the SVG stays the same size).

Expected results:

The animation should fire automatically like any other animation.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::SVG' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=0905d8963ffab547436a67d3e7d5597fb1fd4846&tochange=6e082b6757630d3c57382feb106a674056881f86

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1247218

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:tlouw, could you have a look please?

For more information, please visit BugBot documentation.

Comment 5

[Tiaan Louw [:tlouw]]

Attachment: bug-1883285.html

When you start the browser and the page loads the first time, the animation fires correctly, but when you click the replay button, even refresh the page or even open it in another tab, the animation doesn't play.

Removing the vector-effect: non-scaling-stroke; value does "fix" the problem as mentioned.

Comment 6

[Robert Longson [:longsonr]]

Attachment: Bug 1883285 - ensure non-scaling-stroke animates when scaling starts from 0 r=emilio

Comment 7

[Robert Longson [:longsonr]]

https://treeherder.mozilla.org/jobs?repo=try&revision=e691f38ab94bc18dda9683b1701621b286d93326

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b1ba7de67667
ensure non-scaling-stroke animates when scaling starts from 0 r=emilio

Comment 9

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/46577 for changes under testing/web-platform/tests

Comment 10

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/b1ba7de67667

Comment 11

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot