Skip to content

fix(virtual-core): prevent measurement jitter when scale is applied #986

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 5, 2025

Conversation

usings
Copy link
Contributor

@usings usings commented Apr 25, 2025

Problem

When using the measureElement function in combination with scaled elements (via CSS transform: scale(...)), the getBoundingClientRect() method returns fractional values that may cause layout jitter or re-renders due to rounding inconsistencies.

Solution

Fallback measurement now uses offsetWidth / offsetHeight instead of getBoundingClientRect() when ResizeObserverEntry.borderBoxSize is not available. This avoids jitter caused by scaled bounding boxes.

Why offset*?

  • offsetWidth / offsetHeight give integer values.
  • Not affected by transform: scale(...), unlike getBoundingClientRect().
  • More stable for virtualizer calculations when dealing with scaled elements.

Impact

Improves measurement stability in virtualized lists using CSS transforms. No breaking changes.

Copy link

changeset-bot bot commented Apr 25, 2025

🦋 Changeset detected

Latest commit: 4cb29f8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages
Name Type
@tanstack/virtual-core Patch
@tanstack/angular-virtual Patch
@tanstack/lit-virtual Patch
@tanstack/react-virtual Patch
@tanstack/solid-virtual Patch
@tanstack/svelte-virtual Patch
@tanstack/vue-virtual Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

nx-cloud bot commented May 5, 2025

View your CI Pipeline Execution ↗ for commit 4cb29f8.

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 2m 29s View ↗
nx run-many --target=build --exclude=examples/** ✅ Succeeded 17s View ↗

☁️ Nx Cloud last updated this comment at 2025-05-05 15:04:41 UTC

Copy link

pkg-pr-new bot commented May 5, 2025

More templates

@tanstack/angular-virtual

npm i https://pkg.pr.new/@tanstack/angular-virtual@986

@tanstack/lit-virtual

npm i https://pkg.pr.new/@tanstack/lit-virtual@986

@tanstack/react-virtual

npm i https://pkg.pr.new/@tanstack/react-virtual@986

@tanstack/solid-virtual

npm i https://pkg.pr.new/@tanstack/solid-virtual@986

@tanstack/svelte-virtual

npm i https://pkg.pr.new/@tanstack/svelte-virtual@986

@tanstack/vue-virtual

npm i https://pkg.pr.new/@tanstack/vue-virtual@986

@tanstack/virtual-core

npm i https://pkg.pr.new/@tanstack/virtual-core@986

commit: 4cb29f8

@piecyk
Copy link
Collaborator

piecyk commented May 5, 2025

@usings Could you also update observeElementRect to use offsetWidth / offsetHeight as a fallback instead of getBoundingClientRect()?

@usings
Copy link
Contributor Author

usings commented May 5, 2025

@usings Could you also update observeElementRect to use offsetWidth / offsetHeight as a fallback instead of getBoundingClientRect()?

Sure. I’ll make that change shortly.

@piecyk piecyk merged commit e2d93c2 into TanStack:main May 5, 2025
4 checks passed
@piecyk
Copy link
Collaborator

piecyk commented May 5, 2025

Thanks @usings

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants