Skip to content

fix(reorder-group): use fractional item heights when calculating swap points - #31676

Open
ShryukGrandhi wants to merge 1 commit into
ionic-team:mainfrom
ShryukGrandhi:fix/issue-31670-bug-reorder-swap-boundaries-drift-with-f
Open

ShryukGrandhi wants to merge 1 commit into
ionic-team:mainfrom
ShryukGrandhi:fix/issue-31670-bug-reorder-swap-boundaries-drift-with-f

Conversation

@ShryukGrandhi

Copy link
Copy Markdown

Issue number: resolves #31670


What is the current behavior?

When a drag starts, ion-reorder-group caches where each item ends by summing offsetHeight for each child. offsetHeight is rounded to a whole pixel, so items with fractional heights (for example 64.5px) add up to half a pixel of error per row. The swap point drifts further from where it should be the further down the list you go.

What is the new behavior?

  • Item boundaries and the selected item height use getBoundingClientRect().height, which keeps fractional heights. The swap point stays aligned at every row.
  • Added an e2e test that drags across 30 items that are each 20.5px tall and checks that the reported to index is correct. Without the fix it reports 24 instead of 25.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Tested locally with npx playwright test src/components/reorder-group/ --project="Mobile Chrome". The new test fails before the change and passes after it, and the other reorder-group behavior tests still pass. The only failures were the a11y font-scaling screenshot tests, which have no darwin baselines on my machine.

Fixes #31670

… points

Signed-off-by: ShryukGrandhi <85529990+ShryukGrandhi@users.noreply.github.com>
@ShryukGrandhi
ShryukGrandhi requested a review from a team as a code owner October 30, 2026 20:32
@ShryukGrandhi
ShryukGrandhi requested a review from ShaneK October 30, 2026 20:32
@vercel

vercel Bot commented Oct 30, 2026

Copy link
Copy Markdown

@ShryukGrandhi is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added the package: core @ionic/core package label Oct 30, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: reorder swap boundaries drift with fractional row heights

1 participant