SVG过滤器显示不正确的颜色

Question

我发现this tutorial并认为它很有趣。但是，在某些浏览器中存在问题。白色不是使用粉红色，而是显示混合应该发生的位置。我不确定这是因为feColorMatrix还是feComposite？这可能与Chrome版本有关（Chrome 63中显示的问题），但support seems fine for SVG。

我可以申请解决这个问题吗？

Codepen link.

问题图片：

var tl = new TimelineMax({repeat: -1});

tl.from("#two", 2, {ease: SlowMo.ease.config(0.7, 0.7, false), scale: .2, y: -60})
  .to("#two", 1, {y: 100})
  .to("#two", 1, {ease: Back.easeOut.config(1.7), y: -60, scale: .2})
;

.container {
  -webkit-filter: url("#goo");
  filter: url("#goo");
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.container div {
  width: 100px;
  height: 100px;
  background: #f59393;
  border-radius: 100px;
}

#two {
  position: relative;
  top: -1px;
}

body {
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>

<div class="container">
  <div id="one" class="box"></div>
  <div id="two" class="box"></div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" 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 19 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
    </filter>
  </defs>
</svg>