measureElement caches 0 size for nodes that aren't attached yet (Vue: rows stack at start 0 and the list scrolls away on mount)
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 78/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- typescript
- Domain
- frontend, performance
Research direction
Start at Virtualizer.measureElement and compare its synchronous measurement path with the existing ResizeObserver handling for disconnected nodes. Verify that detached nodes keep their estimated size while remaining observed, then add or run a regression test covering detached measurement, later attachment, and preserved scroll position.
Written by the indexing model from the issue text.
Description
Describe the bug
Virtualizer.measureElement(node) measures the node synchronously right after observing it, even when the node is not attached to the document yet. A detached node reports offsetHeight === 0, and since there is no cached size on the first measurement, that 0 is stored as the item size.
In Vue this is easy to hit. Function refs run synchronously during patch, so when the rows are created in the same patch as their parent (the sizer is behind v-if and shows up once data is loaded), :ref="(el) => virtualizer.measureElement(el)" is called while the sizer is still detached:
- Every visible row gets size
0and renders atstart: 0, on top of each other. - On the next frame the ResizeObserver reports the real sizes and the rows spread out.
- The list ends up scrolled down (~305px in the repro, row 9 at the top) instead of staying at the top.
The ResizeObserver callback already ignores disconnected nodes (#1135), but the sync path in measureElement doesn't. #1226 only rejects a 0 when there is a previously cached size, so it doesn't cover the first measurement either.
Your minimal, reproducible example
https://stackblitz.com/github/webn00b/tanstack-vue-virtual-detached-measure
Steps to reproduce
- Open the repro. The scroll container is always rendered; the sizer and the rows are behind
v-if="loaded", which flips after a simulated fetch. - Rows are measured with
:ref="(el) => virtualizer.measureElement(el)",estimateSizeis 60. - Check the output under the list: the ref calls log
isConnected: false, offsetHeight: 0, and right afternextTickthe visible items havestart: 0, size: 0. - After the ResizeObserver fires, the list is at
scrollTop ≈ 305.
Expected behavior
Rows keep their estimateSize positions until they are measured, and the list stays at scrollTop: 0.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- OS: macOS
- Browser: Chrome
Not browser-specific, it comes from when Vue calls function refs.
tanstack-virtual version
@tanstack/vue-virtual 3.13.39, @tanstack/virtual-core 3.17.11
TypeScript version
No response
Additional context
Skipping the sync measurement when !node.isConnected fixes it. The node is still observed, so the first frame uses estimateSize, the ResizeObserver delivers the real size once the node is attached, and the scroll position stays at 0. I have a fix with a regression test and can open a PR.
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
- Dominant language
- TypeScript
- Stars
- 7.1k
- Forks
- 468
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 12
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from TanStack/virtual
-
Difficulty 4/5 3-5 days Newbie friendliness 55/100
Maintainers usually reply within 1 day
-
Difficulty 5/5 Over a week Newbie friendliness 38/100
Maintainers usually reply within 1 day
-
Difficulty 4/5 3-5 days Newbie friendliness 62/100
Maintainers usually reply within 1 day
-
Difficulty 4/5 3-5 days Newbie friendliness 55/100
Maintainers usually reply within 1 day
-
Difficulty 3/5 1-2 days Newbie friendliness 68/100
TanStack/virtual#1257 · 1 reaction ·
Maintainers usually reply within 1 day
All issues in TanStack/virtual
Similar issues
-
Difficulty 1/5 1-3 hours Newbie friendliness 88/100
supabase/agent-skills#611 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 68/100
polka-codes/test#345 ·
Maintainers usually reply within 1 day
-
Difficulty 1/5 1-3 hours Newbie friendliness 92/100
GoogleChromeLabs/project-sesame#217 ·
Maintainers usually reply within 12 days
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
solana-foundation/solana-com#2202 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 85/100