[Vuejs]-SVG Blur Filter not working on iOS wkwebview

Here’s a version of what I mentioned in the comment above. I also explicitly dimensioned and positioned each element (x/y/width/height) which can sometimes give problems in Safari. I also replaced the use in the clipPath with a paste of the shape. This should work.

This doesn’t work in Firefox for another reason – which is that feImage doesn’t support fragment references in Firefox. You have to inline any shapes you want to feed into feImage using a data:uri.

Update – version 2: for some reason iOS Safari doesn’t like the feImage/rect2 combination, so I changed filter primitives to objectBoundingBox and adjusted the stdDeviation for the blur to % units and switched to using a positioned feFlood for the mask – this seems to work in iOS Safari now.

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="120%" width="120%">
  <defs>
    <rect id="rect" x="0%" y="0%" width="100%" height="100%" rx="5" />

    <clipPath id="clip">
      <rect x="0%" y="0%" width="100%" height="100%" rx="5" />
    </clipPath>

    <rect id="rect2" x="0%" y="70%" width="100%" height="30%" fill="#fff" />

    <filter
      id="myblurfilter"
      x="0%"
      y="0%"
      width="100%"
      height="100%"
      filterUnits="objectBoundingBox"
      primitiveUnits="objectBoundingBox"
      color-interpolation-filters="sRGB">

      <feGaussianBlur stdDeviation=".005"/>
      <feComponentTransfer result="blur">
        <feFuncA type="discrete" tableValues="1 1" />
      </feComponentTransfer>
      <feFlood flood-color="white"  x="0" y="0.7" height="0.3" width="1" result="mask"/>
      <feComposite in2="mask" in="blur" operator="in" result="comp" />
      <feMerge result="merge">
        <feMergeNode in="SourceGraphic" />
        <feMergeNode in="comp" />
      </feMerge>
    </filter>

  </defs>
  <use xlink:href="#rect" />
  <image
    x="0%"
    y="0%"
    width="100%"
    height="100%"
    filter="url(#myblurfilter)"
    clip-path="url(#clip)"
    xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/4f/DandelionFlower.jpg"
    preserveAspectRatio="xMinYMin meet"
  />
  <use opacity=".15" xlink:href="#rect2"/>
</svg>