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

Status: NEW

(Core :: SVG, defect, P3)

Description

[Springtime]

Attachment: 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.

Comment 1

[Brian Birtles (:birtles, Feb 26~ parental leave)]

I notice it restarts if you force reload (Shift+F5). Not sure what the correct behavior here should be.