Repository navigation
fix(reorder-group): use exact item heights - #31710
Open
officialasishkumar wants to merge 1 commit into
Open
officialasishkumar wants to merge 1 commit into
officialasishkumar wants to merge 1 commit into
Conversation
Compute the swap boundaries from each item's getBoundingClientRect height rather than offsetHeight. offsetHeight is rounded to a whole number, so summing it added an error for every item with a fractional height. The swap point moved further from the item boundary further down the list, by about 31px at row 62 with 65.5px items. Move the displaced items by the exact height of the selected item as well, so they land on the row they are making room for. closes ionic-team#31670
|
@officialasishkumar is attempting to deploy a commit to the Ionic Team on Vercel. A member of the Team first needs to authorize it. |
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue number: resolves #31670
What is the current behavior?
When a drag starts,
ion-reorder-groupworks out where each row ends by adding up each item'soffsetHeight. That value is rounded to a whole number, so items with a fractional height add an error for every row and the swap point drifts further from the item boundary further down the list.Items that make room for the dragged item are also moved by its rounded height, so they land slightly off their target row.
What is the new behavior?
getBoundingClientRect()height, so they line up with the items at every position in the list.Does this introduce a breaking change?
Other information
The new tests use 30 rows of
20.5px. Without the fix, they fail in Chromium, Firefox and WebKit: dragging to the center of row 25 reportsto: 24, and the displaced rows move by21pxrather than20.5px. With the fix, they pass in all three, along with the rest of thereorder-groupe2e tests.getBoundingClientRect()reflects transforms on ancestors, unlikeoffsetHeight. This matches the pointer position andcontainerTop, which are already in viewport coordinates.