[Web Animations] Implement composite operations

• Component: Animations
• Status: RESOLVED CONFIGURATION CHANGED

[Antoine Quint]

The Web Animations spec supports composite operations on keyframes, we should support this feature for complete spec support.

[Radar WebKit Bug Importer]

<rdar://problem/44128785>

[Ben Frain]

Any update on this? End of 2020 and broad support everywhere but WebKit/Safari: https://caniuse.com/?search=Web%20Animations

[Antoine Quint]

Hi Ben. No update at the moment. I've got a prototype implementation in a development branch, but I have to invest more time to actually make it something that could be considered for landing into WebKit.

[Ben Frain]

Thanks for the update Antoine, hoping you get to it shortly. I've recently recorded a course on WAAPI and a shame when I have to add WebKit caveats like it is a 'red-headed stepchild'!

[Antoine Quint]

The first step towards supporting this feature is covered by bug 230404 so that we support composite operations for software animations.

[Brent Fulgham]

This is now:
rdar://87213273

[Antoine Quint]

Composite operations are now generally supported in WebKit and are enabled in Safari Technology Preview and Safari in macOS 13 and iOS 16 betas.

The remaining blocking bugs paint a picture of outstanding compatibility issues that we are still working on but will be pretty specific to a given CSS property.

The most important thing to be aware of is that properties that can be typically accelerated, such as "opacity", "filter", "transform", "translate", "scale" and "rotate" will not be fully accelerated if composite operations are used. Instead, the animation resolution will operate on the main thread, while the application of the property will operate on a GraphicsLayer. We are continuing to look into how to address this in the future.

[Ben Frain]

Simple operations like a composite add do not work as expected in Safari. Is it best to open a separate issue for that?

This simple example: https://codepen.io/benfrain/pen/JjXQqVO 

Click 'Move Me' to start the box moving, and then click the 'Scale Me' button to add a scale (using composite: add) — in now way renders as expected in Safari. Fine in Firefox/Chrome.

[Antoine Quint]

(In reply to Ben Frain from comment #8)
> Simple operations like a composite add do not work as expected in Safari. Is
> it best to open a separate issue for that?
> 
> This simple example: https://codepen.io/benfrain/pen/JjXQqVO 
> 
> Click 'Move Me' to start the box moving, and then click the 'Scale Me'
> button to add a scale (using composite: add) — in now way renders as
> expected in Safari. Fine in Firefox/Chrome.

Yes, this is a specific issue. Could you file a dedicated bug report? I'll look into it.

[Ben Frain]

Done https://bugs.webkit.org/show_bug.cgi?id=248944

[Antoine Quint]

This feature has been implemented for quite some time now.