Test setting a blur filter on video elements in one of two ways: 1) first, via an SVG `filter`: ``` <svg height="0" aria-hidden="true"> <filter id="f" color-interpolation-filters="sRGB" x="-1" y="-1" width="3" height="3"> <feGaussianBlur stdDeviation="8"/> </filter> </svg> ``` ``` blur: url(#f) ``` 2) then via a CSS `filter`: ``` filter: blur(8px) ``` Live on CodePen https://codepen.io/thebabydino/pen/NPpPdMy?editors=1100 **Expected result**: both video elements should be blurred just the same, whether it's via the SVG or the CSS `filter`. This is what happens in both Chrome and Firefox. **Safari result**: only the second video, the one having the blur applied via a CSS `filter` is actually blurred. I've only tested via Epiphany, but I've asked and it's been confirmed it happens in actual Safari as well https://mastodon.social/@anatudor/117161320943469504 This is an issue with SVG filters on `video` elements in general and not limited to blur. The same problem occurs when replacing the `feGaussianBlur` primitive with a `feColorMatrix` that should rotate the hue (`<feColorMatrix type="hueRotate" values="180"/>`) of the video or fully desaturate it (`<feColorMatrix type="saturate" values="0">`).