Bug 229499 – iOS 15 Regression: Fill mode not respected when when updating Web Animation keyframes

• Component: Animations
• Status: RESOLVED FIXED

[Liam DeBeasi]

Created attachment 436396 [details]
Code reproduction

When updating Web Animations using Animation.effect.setKeyframes, the fill mode is not being respected. This issue reproduces on iOS 15 beta 6 and does not reproduce on iOS 14.7.1.

Steps to reproduce:
1. Open code reproduction on a device running iOS 15.
2. Observe that there is button that says "Present Modal" and text below it that says "Hello World".
3. Click the "Present Modal" button. Observe that the "Hello World" text animated from the top of the screen to the bottom of the screen.
3. When the animation completes, observe that the "Hello World" text jumps to the top of the screen instead of remaining at the bottom of the screen.

Note: The reproduction is somewhat non-deterministic and I can't quite figure out why. If the issue does not reproduce, try refreshing the page a few times. The attached video shows the issue being reproduced.


Expected Behavior:
I would expect that the text remains at the bottom of the screen as the animation has "fill: both" set.


Actual Behavior:
The text jumps to the top of the screen.


Other Information
- I can also reproduce this on STP 130.
- I cannot reproduce this on Chrome or Firefox.
- I created as minimal of a reproduction as I could, but removing some of the additional styles (pseudo element, overflow, etc) fixes the issue and I am not quite sure why. Looking at the Layer tab in dev tools, it looks like WebKit does not clean up the layer when these styles are present.

[Liam DeBeasi]

Created attachment 436397 [details]
Video of issue on iOS 15 device

[Radar WebKit Bug Importer]

<rdar://problem/82359455>

[Liam DeBeasi]

I took a look at this again, and it appears to be some kind of rendering artifact rather than the fill mode not being respected.

If you reproduce the issue and then try to hover over the element in the Elements pane, the "Hello World" text on the screen never gets highlighted. Additionally, the "Hello World" text is in its own layer offscreen if you open up the Layers pane.

I still cannot reproduce this on iOS 14.7 so it does seem to be some kind of new bug in iOS 15.

Let me know if I can do anything else to help debug the issue.

[Antoine Quint]

I'm having a hard time regressing this as it reproduces flakily in STP 131 / ToT.

[Liam DeBeasi]

Do you have any recommendations for what I could try to make the reproduction more consistent? I had tried to strip out as much unnecessary code as possible, but I was never quite able to get the issue to reproduce consistently (possibly because of the async code?)

[Maciej Stachowiak]

Does this affect any websites or apps? (This info would be helpful for prioritization).

[Liam DeBeasi]

This is not impacting any websites/apps in production that I am aware of. It was impacting an upcoming feature we are trying to add to Ionic, but as of iOS 15 beta 7 I am having a significantly harder time reproducing the issue when using both the new feature and the code reproduction attached to this thread.

[Liam DeBeasi]

Testing this again on iOS 15.1 and it's even harder to reproduce. The issue does not seem to be impacting the new feature we are adding to Ionic now either.

I understand that a flaky reproduction makes it hard to fix the issue, so feel free to close this issue out. I can always open another one if I find a way to reproduce the issue more consistently.

[Liam DeBeasi]

I cannot reproduce the issue anymore, so I am going to close this. Thanks!