Search code examples
htmlfirefoxsvghtml-renderingsvg-animate

SVG animation fails in Firefox in a strange way

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

Solution

  • I fixed this in Firefox 35 via bug 1067375.