Bug 238423

Summary: Motion Offset Path properties effectively removed when transform animation also applied
Product: WebKit Reporter: dwilson1
Component: AnimationsAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: dino, graouts, graouts, tho22, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=236709
https://bugs.webkit.org/show_bug.cgi?id=236712
Bug Depends on: 236709, 236712    
Bug Blocks: 203847    
Attachments:
Description Flags
A screen capture of the expected results, as captured in the latest Firefox Nightly. none

Description dwilson1 2022-03-27 10:37:46 PDT
Created attachment 455865 [details]
A screen capture of the expected results, as captured in the latest Firefox Nightly.

Motion Path (`offset-path`) properties appear to be working well until a transform animation (or transition) is applied to the same element. I've tried to break this down to a reduced case in the following demo: https://codepen.io/danwilson/pen/OJOjPjJ?editors=0100

I can set values for an `offset-path` and individual `offset-distance` for various elements (in the demo, it's an unordered list of 6 items)

If I do just the offset properties, or even if I add a static `transform` to each item, the offset path and distance are applied as expected.

However, if instead I try to do a `transform` animation or transition, the offset properties all effectively unapplied (but they show as active in dev tools).

It appears it's any animation that includes a transform, translate, scale, or rotate property. An opacity animation, as seen in the demo, still respects the offset properties applied.

I first noticed this in a much larger demo https://codepen.io/danwilson/pen/PQddxe and thought Motion Path wasn't working (even though it had been mentioned in Release Notes for Tech Preview) until I opened others' demos in Safari TP. I'm including that demo here in case my reduced test case and hypotheses are incomplete or inaccurate.

I have seen this behavior since Motion Path was first introduced on Tech Preview, including the most recent version 142.
Comment 1 Antoine Quint 2022-03-28 04:52:17 PDT
That's expected for now, we have a couple of smaller items left to finish support of "offset" and its longhand properties. Once bug 236709 and bug 236712 are done, this will work.
Comment 2 Radar WebKit Bug Importer 2022-03-28 06:43:53 PDT
<rdar://problem/90919492>
Comment 3 Antoine Quint 2022-05-17 02:03:27 PDT
I have this working with work-in-progress patches for the two blocking bugs.
Comment 4 Antoine Quint 2022-05-19 06:09:56 PDT
Blocking bugs are fixed and the codepens mentioned now work fine.