Using feGaussianBlur, feColorMatrix and feBlend in Safari

Question

I am using svg filter to create a "gooey" blend between three circles stacked vertically. In Chrome/Firefox (minus some smoothing) I get the desired effect. In Safari, I get something very choppy and ugly.

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <filter id="goo" x="0" y="0" color-interpolation-filters="sRGB">
          <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>

Here is a Link to my full CodePen

After reading around I've learned that Safari is very touchy with feGaussianBlur and the settings need to be set just right to get it to work properly.

Does anyone know the tweaks needed to get the desired effect across all browsers?

Answer 1

SVG Filters on HTML content is very tricky on Safari. If you look at the gooey menu examples on codepen, they're very carefully crafted to keep everything on the GPU - using position absolutes, 3D transforms and such. They also don't scale anything if you look at them closely. I would advise just doing those parts of the interface completely within SVG with javascript animation. That way you won't have to work around Safari's weirdness.