SVG - animate does not work in Firefox

DrNiels commented 4 years ago

Description

I want to use an animated SVG in my app. This is working great in Chrome, but unfortunately not in Firefox. The animation does not occur and the SVG freezes at its initial configuration. Without Polymer, animations work fine, even in Shadow DOMs.

Live Demo

The following element shows the erroneous behavior: import '@polymer/polymer/polymer-legacy.js'; import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';

class Test extends PolymerElement {
    static get is() {
        return 'my-element';
    }

    static get template() {
        return html`

    <svg width="120" height="120" viewBox="0 0 120 120" version="1.1"
        xmlns="http://www.w3.org/2000/svg">

        <rect x="10" y="10" width="100" height="100">
            <animate attributeType="XML" attributeName="x" from="-100" to="120"
                dur="10s" repeatCount="indefinite"/>
        </rect>
    </svg>
`;
    }
}

customElements.define(Test.is, Test);

Steps to Reproduce

Create 'my-element'
See that the animation does not occur in Firefox

Expected Results

I'd expect to see the animation in Firefox.

Actual Results

No animation occurs in Firefox

Browsers Affected

[ ] Chrome
[x] Firefox
Edge and IE do not apply as they do not support animation anyway
I had no Safari available to test

Versions

Polymer: v3.3.0
webcomponents: v2.3.0

lokjunneo commented 4 years ago

I tried 2 basic examples, without the use of Polymer library.

Firstly, I tried only having the svg itself

<html>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">

      <rect x="-40.7968" y="10" width="100" height="100">
          <animate attributeType="XML" attributeName="x" from="-100" to="120" dur="10s" repeatCount="indefinite"></animate>
      </rect>
 </svg>
</html>

Results: Works as expected.

Next, I tried appending the svg into a <p>'s shadowroot.

<html>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">

      <rect x="-40.7968" y="10" width="100" height="100">
          <animate attributeType="XML" attributeName="x" from="-100" to="120" dur="10s" repeatCount="indefinite"></animate>
      </rect>
 </svg>
<p></p>
<script>
let p = document.querySelector("p")
let shadow = p.attachShadow({mode: 'open'});
shadow.appendChild(document.querySelector("svg"))
</script>
</html>

Results: Does not work on firefox. Works fine in chrome.

I'm inclined to believe that the issue lies with firefox itself.

lokjunneo commented 4 years ago

Possible workaround: Use css animation instead.

<style>
  @keyframes slidein {
    from {
      x: -100px;
    }

    to {
      x: 120px;
    }
  }
  svg>rect {
      animation-duration: 10s;
      animation-name: slidein;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
  }
</style>

Put this in together in the shadowroot. You can do so by inserting this into static get template() {.

As an alternative to using svg>rect, you may assign a class attribute to the rect and use it instead.

DrNiels commented 4 years ago

Thank you for your feedback! I went ahead and reported the issue for Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1601666

Polymer / polymer