Bug 238423 – Motion Offset Path properties effectively removed when transform animation also applied

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: Animations

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.

[Antoine Quint]

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.

[Radar WebKit Bug Importer]

<rdar://problem/90919492>

[Antoine Quint]

I have this working with work-in-progress patches for the two blocking bugs.

[Antoine Quint]

Blocking bugs are fixed and the codepens mentioned now work fine.