1

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

4

3 回答 3

2

我通过bug 1067375在 Firefox 35 中修复了这个问题。

于 2014-12-31T08:25:28.937 回答
1

如果我删除<circle>. 这不是一个很好的解决方案（我仍然想要圆圈！），所以我想：

  • 如果我把它改成一个<path>呢？（没用）
  • 如果我重新排序元素，使圆圈（或路径）成为第一个绘制的元素怎么办？（仍然没有运气）。

我很沮丧，但我发现：这可能是因为 Firefox 认为圆圈阻挡了元素，因此通过不渲染“无论如何都不会出现”的更改来优化动画（即使这个假设是错误的） .

为了验证情况是否如此，我对其中一条路径进行了更改，使其呈现在圆圈之外，从而使动画播放。换句话说，Firefox 确实在以一种错误的方式进行优化。但是任何涉及视觉变化的“修复”都是一个很大的禁忌。我仍然想显示预期的图形。

想了想，心想，嗯，它的渲染器明明很傻吧？那它一定是傻到被“旋转圈子”给骗了。你猜怎么着，就是这样！

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

我只是复制了一个旋转并将其放入圆圈中。我这样做的原因是因为 gzipping 在发现重复内容时效果很好。

这是一个工作小提琴。

随时向 Mozilla 报告此问题。晚安=_='

于 2014-09-13T05:38:06.410 回答
0

我用非常简单的 js 代码解决了这个错误 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()
        }
    }
于 2017-01-08T06:43:05.873 回答