Bug 219506 – accelerated animations run incorrectly on element with autofocus input

• Status: NEW
• Component: Animations

[Liam DeBeasi]

Created attachment 415334 [details]
Code Reproduction

When running an accelerated animation on an element with an autofocus input, the animation is run incorrectly in WebKit.

Steps to reproduce:

1. Open the attached code reproduction in Safari (macOS or iOS).
2. Click "Open Modal without Autofocus Input". Notice that the modal animates in correctly.
3. Click "Dismiss Modal" to close the modal.
4. Click "Open Modal with Autofocus Input". Notice that the modal does not animate in correctly.

Expected Behavior:

I would expect that the animation for a modal with an autofocus input would yield the same result as the animation for a modal without an autofocus input.

Actual Behavior:

The animation for a modal with an autofocus input is not correct.

Other Information:

* I tested this on STP 116 on macOS 11.0.1. I can also reproduce this on iOS 13.6 and 14.3. One thing to note is that if the keyboard does not open, this issue does not occur. (Sometimes the input may be focused on iOS but the keyboard does not open) 
* As mentioned above, I can only reproduce this using accelerated animations. Using top instead of translateY does not reproduce the issue.
* Possibly related to https://bugs.webkit.org/show_bug.cgi?id=174892
* It looks like the entire view shifts up when the animation starts and then comes back into place when the animation ends.

[Liam DeBeasi]

Created attachment 415335 [details]
Code Reproduction

Updated code reproduction with just the index.html file instead of the .zip.

[Smoley]

Thanks for filing, I can reproduce this on Safari 13.1.3 - STP 116.

[Radar WebKit Bug Importer]

<rdar://problem/72056271>