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.
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.
Mark, could you write a test that shows the issue and attach it? This would help.
(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?
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.
<rdar://problem/109663447>
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.
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.