Bug 184601 – CSS filter property with feColorMatrix on moving elements does not work

• Component: CSS
• Status: NEW

[Alex Fallenstedt]

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.

[Alex Fallenstedt]

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

[Alex Fallenstedt]

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

Video element on top, image element on bottom

[Radar WebKit Bug Importer]

<rdar://problem/39458549>

[Alex Fallenstedt]

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.

[Simon Fraser (smfr)]

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.

[Alex Fallenstedt]

@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

[Simon Fraser (smfr)]

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.

[Alex Fallenstedt]

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

[Alec Larson]

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

[Stephen Bannasch]

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

[Stephen Bannasch]

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%);
      }
    }
  }

[Stephen Bannasch]

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%);
    }
  }
}

[Simon Fraser (smfr)]

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

[Stephen Bannasch]

(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.

[Yehonatan Daniv]

@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?