Flip animations skipped in Firefox and Chrome, but not in Safari #4139
Description
Describe the bug
In rare instances, flip animations are skipped (in browsers other than Safari).
I'm making a sliding puzzle. I have a fixed start position. As shown in the attached GIF, when I click 2 followed by 3, the sliding animation is skipped for the second click (i.e. the 3-piece teleports to its end position). If I slide the pieces back (by clicking 3 and then 2) and repeat the process, everything works.
The bug appears with some opening sequences, but not others. E.g.: If you click 4 and then 1, the bug appears, but not 5 and then 3.
The bug appears in Firefox and Chrome, but not Safari.
Logs
Not included
To Reproduce
See this REPL; reload the page between each test: https://svelte.dev/repl/c0fdc09f46784474be2bcca4d56bd1ce?version=3.16.5
I have tested all possible opening sequences, and the bug appears in the following:
- 2-3
- 2-1
- 4-1
- 4-7
... but not in the following:
- 8-7
- 8-6
- 5-6
- 5-3
My suspicion is that the first tile is the deciding factor, because the bug appears when clicking 2 or 4 first, but not 8 or 5.
If you click the second piece before the first piece's slide animation has finished, the bug disappears. (This is easier to reproduce if you increase the animation duration.)
Expected behavior
I expect the animation to work in all cases (in all browsers).
Stacktraces
Not included
Information about your Svelte project:
- Firefox 71.0, Chrome 77.0.3865.90 and Safari 13.0.4 (15608.4.9.1.3)
- MacOS 10.15.2 (19C57)
- Svelte version 3.16.5
Severity
This is just annoying and mysterious. In other words, not very severe.
Additional context
No other context