fix(reorder-group): synchronize reordering with style update

[dan-rp1]

closes #21182

• [X] Bugfix

What is the current behavior?

In the function completeSync(), in the reorder-group component:

When used in Firefox, the most recently set value of the translateY css property is applied to the selectedItemEl variable and rendered visually before the cleared transform property is rendered. This creates the appearance of a "double" animation as the element jumps out of place and slides to its final location.

Issue URL: https://github.com/ionic-team/ionic-framework/issues/21182

What is the new behavior?

The reorder operation and the update to the style property are moved to the next turn of the event loop by setTimeout (with default of 0 delay), which causes Firefox to render them in the expected way (no jumping of the selected element).

Does this introduce a breaking change?

• [ ] Yes
• [X] No

[sean-perkins]

Thanks for this PR @dan-rp1. Couple items that will need to be addressed so that our team can consider it:

1. We avoid using setTimeout as a mechanism for delaying rendering (unless as a feature designed to operate after a specific duration). Can you try with our raf utility instead and see if waiting for the next available frame resolves the issue instead?
2. The original issue does not have a reproduction app to test against. We will need a reproduction app to confirm these changes function as expected.
3. Due to the nature of this bug, a test covering the expected behavior would be good to add here.

Let me know if you have any questions!

[liamdebeasi]

Thank you very much for the PR! We appreciate your contribution to Ionic Framework. I developed another solution that uses a requestAnimationFrame rather than a setTimeout which should help make sure that the DOM manipulation and the transform update happens in the same frame. I am going to close this PR in favor of https://github.com/ionic-team/ionic-framework/pull/26326, but I will be sure to give you co-author credit if the PR is merged. Let me know if you have any questions.

[dan-rp1]

Thank you! Glad I could be involved.

On Mon, Nov 21, 2022 at 8:57 AM Liam DeBeasi @.***> wrote:

Thank you very much for the PR! We appreciate your contribution to Ionic Framework. I developed another solution that uses a requestAnimationFrame rather than a setTimeout which should help make sure that the DOM manipulation and the transform update happen in the same frame. I am going to close this PR in favor of #26326 https://github.com/ionic-team/ionic-framework/pull/26326, but I will be sure to give you co-author credit if the PR is merged. Let me know if you have any questions.

— Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic-framework/pull/25669#issuecomment-1322278488, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZ2Y6ILHAFFPA3LHTDNUE43WJOLWBANCNFSM54JB5BJA . You are receiving this because you were mentioned.Message ID: @.***>