Created attachment 337913 [details] Expected behavior - Video element and img both apply filter with svg

Created attachment 337914 [details] Actual behavior - In Safari, video element ignores filter(#blue-tint) Video element on top, image element on bottom

<rdar://problem/39458549>

Further investigation proves that you can apply filters properly to still images. But if you attempt to apply a filter to a moving image, it breaks only in Safari.

The issue here is that WebKit doesn't support references to SVG filters when doing "accelerated" filters. This is a shame, since there's no way to do a color matrix via a CSS filter.

@smfr Am I not using a color matrix with an accelerated filter here? This example uses a still image that is turning blue and works perfectly on Safari. https://codepen.io/Fallenstedt/pen/pLMZwG A video does not produce a similar behavior on safari https://codepen.io/Fallenstedt/pen/OvYGjV

There are two filter codepaths; one for static content, and another if we call into the compositing ("accelerated") code path. The url(#foobar) stuff doesn't work in the second case.

@smfr Ah, that makes sense. Thank you for the clarification.

Here's another reproduction: https://codesandbox.io/embed/8zx4ppk01l

Also came across this bug trying to apply and svg feColorMatrix filter to an element containing a video. Works everywhere else.

Here's the very ugly hack I'm using to make something work on Safari: .fixed-video-container { visibility: visible; opacity: 1; filter: url(#blue-wash); @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { filter: sepia(100%) hue-rotate(145deg) saturate(400%) brightness(100%) contrast(25%); } } }

Created attachment 452051 [details] example comparing blue-wash SVG filter over video To get some equivalent on Safari. html: <svg> <filter id="blue-wash"> <feColorMatrix type="matrix" values="0.36 0 0 0 0 0 0.75 0 0 0 0 0 0.82 0 0 0 0 0 0.2 0" /> </filter> </svg> css: .fixed-video-container { visibility: visible; opacity: 1; filter: url(#blue-wash); @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { filter: sepia(100%) hue-rotate(145deg) saturate(400%) brightness(100%) contrast(25%); } } }

You'll generally get better performance when animating the CSS filter properties, so it's better to use those than referencing SVG filters.

(In reply to Simon Fraser (smfr) from comment #13) > You'll generally get better performance when animating the CSS filter > properties, so it's better to use those than referencing SVG filters. It's hard to get the color of the blue-washed filtering my client wants for the video using just the CSS properties. I can get close but the SVG filter can easily get to the look they want. The image attachment shows the difference.

@smfr it seems that Webkit is unable to render *any* <*-source> effect on Video, be it mask, clip-path, filter, etc. This has been broken for a long time now, and some already work in other browsers, i.e: filter and clip-path work in Gecko and Blink. Gecko also renders mask. Is there a chance we can get this path fixed?

I ran into this bug when finishing a website with duotone effect for images and videos. The videos are short animations that I wanted to include as videos to optimize loading time. I found out that the SVG filter works on gifs in Safari so I'll convert the animations to gifs.