Bug: Updates to keyed lists break FLIP animations when they occur mid-animation

[dead-claudia]

React version: 16.13.1

Steps To Reproduce

1. Open code example below
2. Observe animation

Link to code example:

Flems

The current behavior

Animations are choppy

The expected behavior

Animations are smooth like in this example

---

Context: this bug is far from unique to React: https://twitter.com/isiahmeadows1/status/1284726730574315522

Edit: Also relevant: https:/whatwg/html/issues/5742

[rickhanlonii]

Hey @isiahmeadows, thanks for filing this issue!

Can you reduce this to a specific React bug? As is, the complaint seems to be that the code just doesn't work as expected. That can happen for a number of reasons that are not bugs in React, so what's the specific React bug we should investigate?

[dead-claudia]

@rickhanlonii The specific issue is that React applies a keyed diff in such a way that it results in the choppy animations. The only functional difference between the React snippet and the vanilla snippet linked in the "expected behavior" section is the render function. They're otherwise doing the same exact thing to the DOM, and I've verified this through DOM inspection. I've also narrowed it down to appendChild vs insertBefore, as referenced in the linked spec bug.

It's not a bug in React itself, but a browser quirk that React needs to work around.

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[dead-claudia]

Bumping to not stale, as I haven't received a response or seen any action taken.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[dead-claudia]

bump

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!