SVG animation fails in Firefox in a strange way

Question

I don't know how to describe it, exactly. Here's a fiddle, with a Base64'd SVG whose contents are:

<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
    <path d="M2 7v2h6c.6 0 1-.5 1-1s-.5-1-1-1H2z" fill="#fff" transform="rotate(135, 8, 8)">
        <animateTransform attributeName="transform" begin="0s" dur="0.8s" from="405 8 8" repeatCount="indefinite" to="45 8 8" type="rotate"/>
    </path>
    <path d="M4.2 7c0 .3-.2.6-.2 1s.1.7.2 1H8c.6 0 1-.5 1-1s-.5-1-1-1H4.2z" fill="#fff" transform="rotate(45, 8, 8)">
        <animateTransform attributeName="transform" begin="0s" dur="1.4s" from="135 8 8" repeatCount="indefinite" to="495 8 8" type="rotate"/>
    </path>
    <circle cx="8" cy="8" fill="none" r="6" stroke="#fff" stroke-width="2"/>
</svg>

(Originally it was a no-repeat background image tucked away in a stylesheet).

Now, in Chrome, this results in what I'd expect:

Chrome recording

But in Firefox, something weird happens (excuse the gif's color being off):

Firefox recording

It seems that it only renders a frame of the animation if it has to forcefully re-paint the area anyway. Also, hitting run several times renders the SVG in different frames, which baffles me even more (it should be at 0s when the document is loaded...).

This baffles me. I can only assume it's a bug, but I'd like to find a workaround to solve it. The only thing I can think of is making it forcefully re-paint the area where the SVG is at quick intervals, but I don't know how to go about doing that...

Any ideas?

Edit: Maybe the problem is something in the SVG itself, but I'm still clueless as to what.

Edit 2: The problem goes away if I remove the <circle>. What?? This is not an acceptable solution...

Robert Longson · Accepted Answer · 2016-07-19T06:18:37.913

2

I fixed this in Firefox 35 via bug 1067375.

edited Jul 19 '16 at 06:18

answered Dec 31 '14 at 08:25

Robert Longson

118,664
26
252
242

Who's awesome? You're awesome! – Camilo Martin Jan 01 '15 at 14:18
@Robert Longson, looks like we have some similar bug using inline SVG with background-image: http://jsfiddle.net/j3obag2L/6/. SVG does not animate if we reload page ignoring cached content (Cmd + Shift + R on Mac, Ctrl + F5 on Win). SVG is base64 encoded, here is original SVG: http://pastebin.com/MNidER40 – Andrey Mar 06 '15 at 20:23
@Robert Longson, actually SVG also does not animate on the first page load on both Win and Mac. But on Windows subsequent page refresh ignoring cache does not cause this issue. On the Mac it does. – Andrey Mar 06 '15 at 20:34
Is it possible to fix "first load" bug? – Griva Jul 19 '16 at 01:36

score 1 · Answer 2 · answered Sep 13 '14 at 05:38

It seems the problem goes away if I remove the <circle>. That's not a very good solution (I still want the circle!), so I thought:

What if I make it a <path> instead? (didn't work)
What if I re-order the elements, making the circle (or path) be the first element drawn? (still no luck).

I was frustrated but I figured out: this is probably because Firefox thinks the circle is blocking the elements, and therefore is optimizing the animation by not rendering changes that "won't show up anyway" (even if it is wrong in this assumption).

To verify that this is the case, I made a change in one of the paths so it is rendered outside the circle, and that made the animation play. In other words, Firefox indeed is optimizing in a buggy way. But any "fix" involving a visual change is a big no-no; I want to still show the intended graphic.

After thinking for a while, I thought, well, it's renderer is clearly stupid, right? Then it must be stupid enough to be tricked by a "rotating circle". And guess what, it is!

<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
    <path d="M2 7v2h6c.6 0 1-.5 1-1s-.5-1-1-1H2z" fill="#fff" transform="rotate(135, 8, 8)">
        <animateTransform attributeName="transform" begin="0s" dur="0.8s" from="405 8 8" repeatCount="indefinite" to="45 8 8" type="rotate"/>
    </path>
    <path d="M4.2 7c0 .3-.2.6-.2 1s.1.7.2 1H8c.6 0 1-.5 1-1s-.5-1-1-1H4.2z" fill="#fff" transform="rotate(45, 8, 8)">
        <animateTransform attributeName="transform" begin="0s" dur="1.4s" from="135 8 8" repeatCount="indefinite" to="495 8 8" type="rotate"/>
    </path>
    <circle cx="8" cy="8" fill="none" r="6" stroke="#fff" stroke-width="2">
        <animateTransform attributeName="transform" begin="0s" dur="1.4s" from="135 8 8" repeatCount="indefinite" to="495 8 8" type="rotate"/>
    </circle>
</svg>

I just copied one of the rotations and put it in the circle. The reason I did this is because gzipping works very well when it spots duplicate content.

Here's a working fiddle.

Feel free to report this to Mozilla. Good night =_='

Behnam · Answer 3 · 2017-02-18T08:31:23.080

0

i solved this bug with js code very simple sessionStorage.setItem('key', 'value');

    if(sessionStorage.getItem('reloaded')===null){
        sessionStorage.setItem('reloaded', 'true');

        //browser is firefox?
        //http://stackoverflow.com/a/9851769/3243488
        if(typeof InstallTrigger !== 'undefined'){ //browser is firefox
             window.location.reload()
        }
    }

edited Feb 18 '17 at 08:31

answered Jan 08 '17 at 06:43

Behnam

6,244
1
39
36

This makes no sense, the bug [isn't supposed to be there anymore](http://stackoverflow.com/a/27718298/124119) and what you're doing could result in infinite page reloads. – Camilo Martin Jan 09 '17 at 10:26
fixed bug, now just one reload, after reload page svg animation worked in firefox – Behnam Jan 09 '17 at 11:48

SVG animation fails in Firefox in a strange way

3 Answers3