bug: IonReorder items animate twice in Firefox

[mtrosenstein]

Bug Report

Ionic version:
5.x

Current behavior:

With IonReorder, when a user drags an item to a new location the "displaced" items use a translateY animation to reposition themselves. When the dragged item is released, the displaced items animate a second time, even though they are already positioned correctly. The user experience is that some items "jump" unexpectedly.

Expected behavior:

The translateY animation should only run only once, with no "jump" when the reorder completes.

Steps to reproduce:

The easiest way to reproduce is to view the official ion-reorder example. Click the "Toggle" text to enable reordering. Next, slowly drag "Item 1" to the location of "Item 4". Notice how the other items translate to their new locations. Then release "Item 1" in its final location and notice how the other items animate again.

[liamdebeasi]

Thanks for the issue. What browser/version are you testing this on? I am not seeing this on Chrome 81.

[mtrosenstein]

Ahh, good question. I see the problem on Firefox 75.0.

[wibed]

I can confirm the bug persists on Firefox 82 on osx

I can't say if it animates twice, but it looks like bouncing back even if the array passed, is reordered correctly.
using undefined on complete will work as expected
on safari it animates as expected

[duerra]

I can confirm the bug is still present as of Firefox 89.

[liamdebeasi]

Hi there,

I have a dev build with a proposed fix if anyone is interested in testing:

6.3.8-dev.11669044540.14469944

[liamdebeasi]

Thanks for the issue. This has been resolved via #26326, and a fix will be available in an upcoming release of Ionic Framework. Please feel free to continue testing the dev build, and let me know if you run into any issues.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.