有什么办法可以使feGaussianBlur和feColorMatrix在Mac Safari中起作用

Question

现在我正在处理我的游标遇到的投资组合投票问题，示例如下：https://codepen.io/SerialAnonymous/pen/eYJqjPN

/*--------------------
Get Mouse
--------------------*/
let mouse = { x: window.innerWidth / 2, y: window.innerHeight / 2, dir: '' };
const getMouse = (e) => {
  mouse = {
    x: e.clientX || e.pageX || e.touches[0].pageX || 0,
    y: e.clientY || e.pageX || e.touches[0].pageY || 0,
    dir: (getMouse.x > e.clientX) ? 'left' : 'right'
  }
};
['mousemove', 'touchstart', 'touchmove'].forEach(e => {
  window.addEventListener(e, getMouse);
});


/*--------------------
Mouse Follow
--------------------*/
class MouseFollow {
  constructor (options) {
    Object.assign(this, options);
    
    this.pos = {
      x: 0,
      y: 0
    }
  }
  
  follow() {
    this.distX = mouse.x - this.pos.x;
    this.distY = mouse.y - this.pos.y;
    
    this.velX = Math.abs(this.distX / 1);
    this.velY = Math.abs(this.distY / 1);
    
    this.pos.x += this.distX / (2 + (this.ind * gooey));
    this.pos.y += this.distY / (2 + (this.ind * gooey));
    
    this.scaleX = map(this.velX, 0, 100, 1, 2);
    this.scaleY = map(this.velY, 0, 100, 1, 2);

    this.el.style.transform = 'translate(' + this.pos.x + 'px, ' + this.pos.y + 'px) scale(' + Math.max(this.scaleX, this.scaleY) + ')';
  }
}


/*--------------------
Map
--------------------*/
function map (num, in_min, in_max, out_min, out_max) {
  return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}


/*--------------------
Init
--------------------*/
const gooey = 2;
const blobs = Array.from(document.querySelectorAll('#cursor .blob'));
const blobFollows = blobs.map((e, i) => new MouseFollow({ el: e, ind: i }));


/*--------------------
Render
--------------------*/
const render = () => {
  requestAnimationFrame(render);
  blobFollows.forEach(e => e.follow());
}
render();

html,
body {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #101010;
  cursor: none;
}

#cursor {
  position: absolute;
  z-index: 1;
  filter: url("#goo");
  transform-origin: center;
}
#cursor .blob {
  position: absolute;
  margin: -15px 0 0 -15px;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: #ffb924;
  top: 50%;
  left: 50%;
  pointer-events: none;
}
#cursor .blob:nth-child(2) {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  z-index: -1;
  background: #ff8b24;
}
#cursor .blob:nth-child(3) {
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  z-index: -2;
  background: #ff6724;
  animation: move2 0.3s forwards infinite;
}
#cursor .blob:nth-child(4) {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  z-index: 30;
  background: #ff2e24;
  animation: move3 0.5s forwards infinite;
}

@keyframes move3 {
  0% {
    left: 5px;
    top: 5px;
  }
  100% {
    left: -5px;
    top: -5px;
  }
}

<div id="cursor">
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur
        in="SourceGraphic"
        stdDeviation="10"
        result="my-blur" />
      <feColorMatrix
        in="my-blur"
        mode="matrix"
        values="
                1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 20 -8"
        result="my-gooey" />
    </filter>
  </defs>
</svg>

为了解决这个问题，我尝试了this question on stack overflow的已有答案，而对于（SVG feColorMatrix doesn't work in safari）的答案都无效

chrome和Safari之间的差异输出如下：

所以我尽力解决了问题，但是上述指南似乎对我不起作用，或者还有其他问题。 TIA