Bug 258134

Created attachment 466701 [details]
Code reproduction

Playing an animation in reverse does not work in iOS 17 if the reversed keyframes are the same as an existing animation applied to the same element.

Steps to reproduce:

1. Open code reproduction on an iOS 17 device.
2. Tap "Run Accelerated Test". Observe that the element translates from 0px to 100px, jumps back to 0px, and then jumps to 100px.

Expected Behavior:

I expect that the square will smoothly translate from 0px to 100px, jump back to 0px, and then smoothly translate to 100px.

Actual Behavior:

The square jumps to 100px after jumping back to 0px.


Other Information:

- This looks similar to https://bugs.webkit.org/show_bug.cgi?id=257861. I wasn't sure if they were the same, so feel free to merge the two threads if they are.
- This works as expected on iOS 16.
- This works as expected on Chrome and Firefox for macOS.
- This seems to only impact accelerated animations. Tapping "Run Non-Accelerated Test" does not reproduce the issue using margin-left.
- Running the second set of keyframes from 0px to 100px without using "direction: 'reverse'" yields the expected behavior. You can try this using the "Run Accelerated Test Without Reversing" button.