measureElement caches 0 size for nodes that aren't attached yet (Vue: rows stack at start 0 and the list scrolls away on mount)
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 78/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- typescript
- 领域
- frontend, performance
调研方向
从 Virtualizer.measureElement 开始，将其同步测量路径与现有的针对已断开节点的 ResizeObserver 处理进行比较。验证已分离的节点在持续被观察的同时仍保留其估计大小，然后添加或运行一个回归测试，覆盖已分离节点的测量、之后的重新附加以及保留的滚动位置。
由索引模型根据 Issue 内容生成。
描述
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.
- 主要语言
- TypeScript
- 星标
- 7.1k
- 派生
- 468
- 平均合并
- 1 天 2 小时
- 30 天内合并 PR
- 12
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
TanStack/virtual 的其他 Issue
-
难度 4/5 3-5 天 新手友好度 55/100
维护者通常 1 天内回复
-
难度 5/5 一周以上 新手友好度 38/100
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 62/100
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 55/100
维护者通常 1 天内回复
-
难度 3/5 1-2 天 新手友好度 68/100
TanStack/virtual#1257 · 1 个 reaction ·
维护者通常 1 天内回复
相似的 Issue
-
check:passed streams:add
难度 2/5 1-3 小时 新手友好度 72/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 88/100
Fission-AI/OpenSpec#1986 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 75/100
nestjs/docs.nestjs.com#3554 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 74/100
publicodes/publicodes#868 ·
-
namespace operations
难度 1/5 1 小时以内 新手友好度 78/100
EclipseFdn/open-vsx.org#13488 ·
维护者通常 2 天内回复