CSS animation-fill-mode:forwards state persists after page reload when inside SVG

NEW
Unassigned

Status

()

Core
SVG
P3
normal
2 years ago
a year ago

People

(Reporter: Springtime, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

2 years ago
Created attachment 8804097 [details]
test-case.html

User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:51.0) Gecko/20100101 Firefox/51.0
Build ID: 20161024004016

Steps to reproduce:

1. Create a CSS animation within an SVG file using animation-fill-mode:forwards (which tells the browser to display the last keyframe after ending).

2. Host the SVG online and embed the image on a HTML page with an img element.

3. Visit the online page, watch the animation, then reload the page.


Actual results:

The animation state isn't reset after a page reload but stays on the last frame, persisting after a page reload.


Expected results:

Expected the animation would repeat after a page reload by resetting the state, like other browsers.

I'm not sure if there is intentional reasoning behind this behavior, however it seems unlikely as it's inconsistent: the behavior only occurs when an SVG is hosted online within a HTML page, or the image is referenced as a base64 encoded data URI in a HTML page – the behavior isn't present when viewing SVGs locally either by themselves or when viewing them inside HTML.

The attached test case displays two lines of animated text for comparison: one using a non-looped animation with the animation-fill-mode property set to 'forwards' the other an infinitely looping animation. Reload to see the behavior.
I notice it restarts if you force reload (Shift+F5). Not sure what the correct behavior here should be.
Component: Untriaged → SVG
Product: Firefox → Core
Version: 51 Branch → Trunk
Status: UNCONFIRMED → NEW
Ever confirmed: true

Updated

a year ago
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.