SVG gooey effect not working on the latest version of FireFox

I have an issue where my feGuassian blur is not working properly when using any other color than black.

On chrome it works perfectly. I have not tested on safari yet.

I have created an example on jsFiddle :

HTML:

<div>
<div class="bigLogo">
    <div class="blobs">
    <div class="blob"></div>
    <div class="blob"></div>
    <div class="blob"></div>
    <div class="connect12">
        <div class="part1"></div>
        <div class="part2"></div>
        <div class="part3"></div>
    </div>
    <div class="connect23">
        <div class="part3"></div>
    </div>
    <div class="connect31">
        <div class="part3"></div>
    </div>
</div>
<svg xmlns="http://www,w3.org" version='1.1'>
    <defs>
        <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0                                                                                       0 1 0 0 0                                                                                   0 0 1 0 0                                                                                   0 0 0 18 -7" result="goo"/>
            <feBlend in="SourceGraphic" in2="goo" />
        </filter>
    </defs>
</svg>
</div>
</div>

<div class="break">
<div class="smallLogo">
        <div class="blobs">
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="connect12">
                <div class="part1"></div>
                <div class="part2"></div>
                <div class="part3"></div>
            </div>
            <div class="connect23">
                <div class="part3"></div>
            </div>
            <div class="connect31">
                <div class="part3"></div>
            </div>
        </div>

        <svg xmlns="http://www,w3.org" version='1.1'>
            <defs>
                <filter id="goo2">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
                    <feColorMatrix in="blur" mode="matrix" values="0 0 0 0 0
                                                                   0 0 0 0 0
                                                                   0 0 0 0 0
                                                                   0 0 0 18 -7" result="goo"/>
                    <feBlend in="SourceGraphic" in2="goo" />
                </filter>
            </defs>
        </svg>
    </div>
</div>

SCSS:

@-webkit-keyframes rotate-logo {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate-logo {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate-logo-small {
    0% {
        -webkit-transform: rotate(0deg) scale(0.3);
        transform: rotate(0deg) scale(0.3);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(0.3);
        transform: rotate(360deg) scale(0.3);
    }
}

@keyframes rotate-logo-small {
    0% {
        -webkit-transform: rotate(0deg) scale(0.3);
        transform: rotate(0deg) scale(0.3);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(0.3);
        transform: rotate(360deg) scale(0.3);
    }
}

@-webkit-keyframes blob-anim-left {
    0% {
        -webkit-transform: translateX(6px) translateY(10px);
        transform: translateX(6px) translateY(10px);
    }
    100% {
        -webkit-transform: translateX(-43px) translateY(25px);
        transform: translateX(-43px) translateY(25px);
    }
}

@keyframes blob-anim-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-43px) translateY(25px);
        transform: translateX(-43px) translateY(25px);
    }
}

@-webkit-keyframes blob-anim-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(59px) translateY(-61px);
        transform: translateX(59px) translateY(-61px);
    }
}

@keyframes blob-anim-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(59px) translateY(-61px);
        transform: translateX(59px) translateY(-61px);
    }
}

@-webkit-keyframes blob-anim-top-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(28px) translateY(36px);
        transform: translateX(28px) translateY(36px);
    }
}

@keyframes blob-anim-top-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(28px) translateY(36px);
        transform: translateX(28px) translateY(36px);
    }
}

@keyframes line-anim-con12 {
    0% {
        -webkit-transform: translateX(-30px) translateY(-24px);
        transform: translateX(-30px) translateY(-24px);
        width: 0px;
    }
    100% {
        -webkit-transform: rotate(-37deg) translateX(-37px) translateY(-83px);
        transform: rotate(-37deg) translateX(-37px) translateY(-83px);
        width: 120px;
    }
}

@keyframes line-anim-con23 {
    0% {
        -webkit-transform: translateX(-30px) translateY(-24px);
        transform: translateX(-30px) translateY(-24px);
        height: 1px;
    }
    100% {
        -webkit-transform: rotate(13deg) translateX(19px) translateY(-46px);
        transform: rotate(13deg) translateX(19px) translateY(-46px);
        height: 25px;
    }
}

@keyframes line-anim-con31 {
    0% {
        -webkit-transform: translateX(-30px) translateY(-24px);
        transform: translateX(-30px) translateY(-24px);
        width: 1px;
    }
    100% {
        -webkit-transform: translateX(-46px) translateY(8px) rotate(25deg);
        transform: translateX(-46px) translateY(8px) rotate(25deg);
        width: 23px;
    }
}

.bigLogo{
    position: absolute;
    width: 208.8px;
    height: 208.8px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.smallLogo{
    position: absolute;
    width: 75px;
    height: 75px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    .blobs{
        -webkit-filter: url('#goo2') !important;
        filter: url('#goo2') !important;
        -webkit-animation: rotate-logo ease-in-out 9s infinite alternate !important;
        animation: rotate-logo ease-in-out 9s infinite alternate !important;
        .blob{
            background: #000 !important;
        }
        .part1{
            background-color: #000 !important;
        }
        .part2{
            background-color: #000 !important;
        }
        .part3{
            background-color: #000 !important;
        }
    }
}

.blobs {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 208.8px;
    height: 208.8px;
    margin: auto;
    -webkit-filter: url('#goo');
    filter: url('#goo');
    -webkit-animation: rotate-logo ease-in-out 9s infinite alternate;
    animation: rotate-logo ease-in-out 9s infinite alternate;
}

.blob {
    background: #2a4059;
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 60%;
    margin-top: -50px;
    margin-left: -50px;
    border-radius: 100%;
}

.blob:nth-child(1) {
    -webkit-animation: blob-anim-left ease-in-out 2.5s infinite alternate;
    animation: blob-anim-left ease-in-out 2.5s infinite alternate;
}

.blob:nth-child(2) {
    -webkit-animation: blob-anim-right ease-in-out 2.5s infinite alternate;
    animation: blob-anim-right ease-in-out 2.5s infinite alternate;
    width: 72px;
    height: 72px;

}

.blob:nth-child(3) {
    -webkit-animation: blob-anim-top-right ease-in-out 2.5s infinite alternate;
    animation: blob-anim-top-right ease-in-out 2.5s infinite alternate;
    width: 84px;
    height: 84px;
}

.line{
    width: 150px;
    height: 10px;
    margin: 150px;
    position: relative;
    filter: url('#goo');

}

.part1{
    width: 50%;
    height: 100%;
    background: #2a4059;
    transform: perspective(70px) rotateY(50deg);
    position: absolute;
    left: 0;
}

.part2{
    width: 50%;
    height: 100%;
    right: 0;
    position: absolute;
    background: #2a4059;
    transform: perspective(70px) rotateY(-50deg);
}

.part3{
    background: #2a4059;
    width: 100%;
    height: 100%;
}

.connect12{
    height: 14px;
    position: absolute;
    left: 50%;
    top: 60%;
    -webkit-animation: line-anim-con12 ease-in-out 2.5s infinite alternate;
    animation: line-anim-con12 ease-in-out 2.5s infinite alternate;
    .part3{
        height: 78% !important;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
    }
}

.connect23{
    width: 11px;
    position: absolute;
    left: 50%;
    top: 60%;
    -webkit-animation: line-anim-con23 ease-in-out 2.5s infinite alternate;
    animation: line-anim-con23 ease-in-out 2.5s infinite alternate;
}

.connect31{
    height: 11px;
    position: absolute;
    left: 50%;
    top: 60%;
    -webkit-animation: line-anim-con31 ease-in-out 2.5s infinite alternate;
    animation: line-anim-con31 ease-in-out 2.5s infinite alternate;
}

.break{
    position: relative;
    top: 350px;
}

https://jsfiddle.net/lastgiven/kqmabvxs/2/

If anyone could have a look and see if they could help me with the issue I would really appreciate it.

Thanks in advance