Bug 233479 – [iOS] [Chrome] Keyframe animation does not use start position

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

[Joy Zhong]

On iOS / Chrome, if you define a keyframe animation such as:

```
@keyframes my-animation {
    from {
      animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transform: translate(100px,100px) scale(0);
    }

    to {
      transform: translate(200px,200px)
        scale(1);
    }
  }
```

And the original position of the element to animate is `transform: translate(0px,0px) scale(0);` and start the animation on the element, the element first takes on the `0px,0px` position rather than the `100px,100px` position defined in the `from` clause.

Note that this does not repro on iOS / Safari or any other platforms (e.g. Chrome/MacOS, Firefox).

See this demo: https://codepen.io/joyzhong/pen/JjyQZXR

[Joy Zhong]

Please note that this creates ripple animation issues for the Material Design Components (MDC) Web UI library, see related bug https://github.com/material-components/material-components-web/issues/7469

[Alexey Proskuryakov]

This certainly sounds like a browser engine issue, but of course Safari and Chrome use the same engine on iOS. Perhaps it would be best for Chrome developers to take a look first to check what could be different?

[Ali Juma]

This reproduces in Chrome on iOS as long as Chrome's tab grid animation has run at least once since the app was launched.

It does not reproduce when navigating directly to the test URL on launch, without visiting the tab grid at all. In this case, however, visiting the tab grid and then returning to the test page causes the bug to occur.

So this seems related to bug 228333, where calls to -[UIView snapshotAfterScreenUpdates:YES] within Chrome's tab grid animation somehow break animations within WKWebView. That bug was determined to be in UIKIt, tracked by rdar://81165761. Could someone with access to that radar please link this bug to it as well?

[Radar WebKit Bug Importer]

<rdar://problem/85936204>

[Antoine Quint]

I cannot reproduce the issue with Chrome in iOS 16.5. Will mark this as fixed, but please reopen with additional information if you see this occurring still.