Weird artefacts with <feGaussianBlur/> on images in safari and mobile browsers - css

Question

I am currently blurring images and using these as background whenever an image gets contained.
I am using the following svg filter with a filter spread out in two steps using feGaussianBlur and feColorMatrix. This renders perfectly in Chrome but in Safari and mobile browsers I see weird artefacts.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<filter
id="blurry"
width="150%"
height="150%"
x="-25%"
y="-25%"
colorInterpolationFilters="sRGB"
>
<feGaussianBlur stdDeviation="45" />
<feColorMatrix
type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 10 0"
/>
<feGaussianBlur stdDeviation="45" />
<feColorMatrix
type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 10 0"
/>
<feComposite in2="SourceGraphic" operator="in" />
</filter>
</svg>
Then in my CSS I use:
-webkit-filter: url('#blurry');
filter: url('#blurry');
Desired result (on desktop):
Result I got:
It shows these weird gaps..
Some things I've noticed:
Changing the filter size and position does not work
On some images I don't see these artefacts
Changing the filter stdDeviation does not work
Could it have something to do with the resolution of my images?

Answer 1

Those are big blurs - so Safari might be downscaling the filter resolution. Although it's deprecated and I think removed from Firefox and Chrome - you can try setting an explicit filterRes in your filter element because that's still supported in Safari.
(Also "colorInterpolationFilters" should be "color-interpolation-filters")