Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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,292 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
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:

  1. Every visible row gets size 0 and renders at start: 0, on top of each other.
  2. On the next frame the ResizeObserver reports the real sizes and the rows spread out.
  3. 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
  1. 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.
  2. Rows are measured with :ref="(el) => virtualizer.measureElement(el)", estimateSize is 60.
  3. Check the output under the list: the ref calls log isConnected: false, offsetHeight: 0, and right after nextTick the visible items have start: 0, size: 0.
  4. 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時間
マージ済み PR（30日）
12

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

TanStack/virtual のほかの issue

TanStack/virtual の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。