title: SVG gooey effect not working on the latest version of FireFox
body: <p>I have an issue where my feGuassian blur is not working properly when using any other color than black. </p>
  
  <p>On chrome it works perfectly. I have not tested on safari yet.</p>
  
  <p><a href="https://i.stack.imgur.com/iJFUj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iJFUj.png" alt="enter image description here"></a></p>
  
  <p>I have created an example on jsFiddle : </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
  &lt;div class="bigLogo"&gt;
      &lt;div class="blobs"&gt;
      &lt;div class="blob"&gt;&lt;/div&gt;
      &lt;div class="blob"&gt;&lt;/div&gt;
      &lt;div class="blob"&gt;&lt;/div&gt;
      &lt;div class="connect12"&gt;
          &lt;div class="part1"&gt;&lt;/div&gt;
          &lt;div class="part2"&gt;&lt;/div&gt;
          &lt;div class="part3"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="connect23"&gt;
          &lt;div class="part3"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="connect31"&gt;
          &lt;div class="part3"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;svg xmlns="http://www,w3.org" version='1.1'&gt;
      &lt;defs&gt;
          &lt;filter id="goo"&gt;
              &lt;feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/&gt;
              &lt;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"/&gt;
              &lt;feBlend in="SourceGraphic" in2="goo" /&gt;
          &lt;/filter&gt;
      &lt;/defs&gt;
  &lt;/svg&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="break"&gt;
  &lt;div class="smallLogo"&gt;
          &lt;div class="blobs"&gt;
              &lt;div class="blob"&gt;&lt;/div&gt;
              &lt;div class="blob"&gt;&lt;/div&gt;
              &lt;div class="blob"&gt;&lt;/div&gt;
              &lt;div class="connect12"&gt;
                  &lt;div class="part1"&gt;&lt;/div&gt;
                  &lt;div class="part2"&gt;&lt;/div&gt;
                  &lt;div class="part3"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="connect23"&gt;
                  &lt;div class="part3"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="connect31"&gt;
                  &lt;div class="part3"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;svg xmlns="http://www,w3.org" version='1.1'&gt;
              &lt;defs&gt;
                  &lt;filter id="goo2"&gt;
                      &lt;feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/&gt;
                      &lt;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"/&gt;
                      &lt;feBlend in="SourceGraphic" in2="goo" /&gt;
                  &lt;/filter&gt;
              &lt;/defs&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>SCSS:</p>
  
  <pre><code>@-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;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/lastgiven/kqmabvxs/2/" rel="nofollow noreferrer">https://jsfiddle.net/lastgiven/kqmabvxs/2/</a></p>
  
  <p>If anyone could have a look and see if they could help me with the issue I would really appreciate it.</p>
  
  <p>Thanks in advance</p>