Bug 256791 – [svg] contrast() filter does not affect SVG elements

• Component: SVG
• Status: NEW

[Mark Eriksson]

I am animating the CSS filter property via the JS Web Animation API and Safari on iOS 16 is not applying the animations.
If I change the animation to use something like opacity, it applies, so there must be an issue with the filter property.

Code:
el.animate([{ filter: "contrast(150%)" }, { filter: "contrast(175%)" }], {
  duration: 200,
});

However, if I change to:
el.animate([{ opacity: 0.5 }, { opacity: 0.8 }], {
  duration: 200,
});
...it works fine.

[Mark Eriksson]

FYI, it is probably worth mentioning that the element I am animating is an SVG <path> element. If I try the animation on any element that isn't an SVG <path> element (<img> for example), it works.

[Antoine Quint]

Mark, could you write a test that shows the issue and attach it? This would help.

[Mark Eriksson]

(In reply to Antoine Quint from comment #2)
> Mark, could you write a test that shows the issue and attach it? This would
> help.

Hi Antoine, yes; is there a guideline/convention for writing tests you have that I should follow?

[Mark Eriksson]

Here is a link to a demo of the issue, best demonstrated on iOS Safari.

https://codepen.io/Markshall/pen/oNaJozr

As you can see, scrubbing your finger over the 'filter'-animated SVG renders no change, however the 'opacity'-animated SVG renders the animation.

[Radar WebKit Bug Importer]

<rdar://problem/109663447>

[Antoine Quint]

To make the example work in Safari on macOS, you must change this TypeScript line:

    if (e instanceof TouchEvent)

to:

    if ('TouchEvent' in window && e instanceof TouchEvent)

I've tried this example in older versions of Safari and it seems to never have worked, so this is not a regression.

[Antoine Quint]

Created attachment 467022 [details]
Reduction

This has nothing to do with animations. The issue is that the `contrast()` filter function does not work on an SVG element as shown in the attached reduction. This works fine with an HTML element.