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

[dead-claudia]

Reproduction

Flems link

Steps to reproduce

Open sandbox link

Expected Behavior

Animation should be smooth like in this example.

Actual Behavior

Animation is choppy.

Context: Preact is far from the only one affected: https://twitter.com/isiahmeadows1/status/1284726730574315522

Edit: Preact version: 10.4.16

Also relevant: https://github.com/whatwg/html/issues/5742

[developit]

Hiya! I responded on Twitter, but I'll echo here for folks who come across the issue: this is a DOM (or browser?) issue and there isn't anything Preact can do about it. Inserting a child invalidates its sibling's in-flight animations.

Curious if the browser folks come back with ideas for whether this could be fixed without violating the spec though, since it seems like 99% of the time animations continuing on siblings would be as good as or much better than having them restart.