Created attachment 337912 [details] Safari - Video on top and image on bottom both using filter(#blue-tint) Hello, I am attempting to apply a filter color using an svg. I have discovered that this technique works well in Firefox, Chrome, but not Safari. You can see the example here: https://codepen.io/Fallenstedt/pen/OvYGjV I created an svg with an 'feColorMatrix' property to create a transparent blue overlay that I can use in the filter property of the video element. I have noticed that this technique works well if it's applied on a still image, like an <img> or a <video> placeholder, but does not get applied to the video.
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?