| Summary: | [svg] contrast() filter does not affect SVG elements | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Mark Eriksson <markeriksson94> | ||||
| Component: | SVG | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Normal | CC: | dino, graouts, graouts, sabouhallawa, webkit-bug-importer, zimmermann | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | Safari 16 | ||||||
| Hardware: | iPhone / iPad | ||||||
| OS: | iOS 16 | ||||||
| Attachments: |
|
||||||
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. 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.
|
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.