Search code examples
iossvgsafariblursvg-filters

SVG bulge on iOS/safari with filter, feGaussianBlur and feColorMatrix

I'm trying to get a gooey effect with svg. Things are fine in chrome, but look weird on Safari & iOS. Here is the example: https://codepen.io/rubenhak/project/editor/ZoBENL

How it looks on Chrome: enter image description here

How it looks on Safari/iOS: enter image description here

The problem is when the one circle is too far, too small or missing, the other circle gets bulged. None of this is an issue on chrome.

Code:

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         viewBox="0 0 500 200" width="500" height="200">
      <defs>
        <filter id="goo" color-interpolation-filters="sRGB">
          <feGaussianBlur in="SourceGraphic" stdDeviation="8" 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 21 -7" result="cm" />
        </filter>
      </defs>
      <g >
        <circle fill="green" r="15" cx="30" cy="95" />
      </g>
      <g filter="url(#goo)">
        <circle fill="blue" r="30"  cx="80" cy="50" />
        <circle fill="green" r="15" cx="80" cy="95" />
      </g>
      <g filter="url(#goo)">
        <circle fill="blue" r="20"  cx="160" cy="50" />
        <circle fill="green" r="15" cx="160" cy="95" />
      </g>
      <g filter="url(#goo)">
        <circle fill="blue" r="20"  cx="220" cy="60" />
        <circle fill="green" r="15" cx="220" cy="95" />
      </g>
      <g filter="url(#goo)">
        <circle fill="blue" r="20"  cx="300" cy="50" />
        <circle fill="green" r="15" cx="300" cy="95" />
      </g>
      <g filter="url(#goo)">
        <circle fill="blue" r="10"  cx="350" cy="50" />
        <circle fill="green" r="15" cx="350" cy="95" />
      </g>
      <g filter="url(#goo)">
        <circle fill="green" r="15" cx="400" cy="95" />
      </g>
      <g >
        <circle fill="green" r="15" cx="450" cy="95" />
      </g>
    </svg>

Solution

  • Safari is clipping the output of the feGaussianBlur to the default filter region before handing it to the feColorMatrix. Chrome doesn't do that. You can fix it by expanding the default filter region.

    <filter id="goo" x="-50%" width="200%" y="-50%" height="200%" color-interpolation-filters="sRGB">