SVG过滤器无法在Firefox上工作但是在chrome上工作正常

Question

我通过scss + svg编写动画 我使用Promise来控制动画

在我完成Chrome之后，Evething看起来非常完美 但是当我在firefox中运行时，这一切都消失了，哪些元素设置了filter svg

我设置了这个svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
    <defs>
        <filter id="gooey">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="step1"/>
            <feColorMatrix in="step1" mode="matrix" values="
                1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0  
                0 0 0 19 -9" result="step2" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

在scss上设置过滤器的Meanwile

filter: url(./baidu_beer.html#gooey);

这是firefox上的测试结果

当我取消聚焦滤镜属性

时

然后一切都很好

这是我的布局