Closed Bug 1883285 Opened 4 months ago Closed 18 days ago

SVG element scale animation via CSS doesn't fire

Categories

(Core :: SVG, defect)

Firefox 123
Desktop
All
defect

Tracking

()

RESOLVED FIXED
128 Branch
Tracking Status
firefox-esr115 --- wontfix
firefox123 --- wontfix
firefox124 --- wontfix
firefox125 --- wontfix
firefox126 --- wontfix
firefox127 --- wontfix
firefox128 --- fixed

People

(Reporter: chriskirknielsen, Assigned: longsonr)

References

(Regression)

Details

(Keywords: nightly-community, regression)

Attachments

(3 files)

Attached video 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.

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.

Component: Untriaged → SVG
Product: Firefox → Core
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Unspecified → All
Regressed by: 1247218
Hardware: Unspecified → Desktop

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

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

For more information, please visit BugBot documentation.

Flags: needinfo?(tlouw)
Attached file 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.

Flags: needinfo?(tlouw)
Severity: -- → S4
Depends on: 1734476
Assignee: nobody → longsonr
Status: NEW → ASSIGNED
No longer depends on: 1734476
Pushed by longsonr@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/b1ba7de67667
ensure non-scaling-stroke animates when scaling starts from 0 r=emilio
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/46577 for changes under testing/web-platform/tests
Status: ASSIGNED → RESOLVED
Closed: 18 days ago
Resolution: --- → FIXED
Target Milestone: --- → 128 Branch
Upstream PR merged by moz-wptsync-bot
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: