Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

measureElement caches 0 size for nodes that aren't attached yet (Vue: rows stack at start 0 and the list scrolls away on mount)

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#1,292 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
78/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
typescript
Domaine
frontend, performance

Piste de recherche

Commencez par Virtualizer.measureElement et comparez son chemin de mesure synchrone avec la gestion existante de ResizeObserver pour les nœuds déconnectés. Vérifiez que les nœuds détachés conservent leur taille estimée tout en restant observés, puis ajoutez ou exécutez un test de régression couvrant la mesure des nœuds détachés, leur rattachement ultérieur et la conservation de la position de défilement.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

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:

  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.
Langage dominant
TypeScript
Étoiles
7.1k
Forks
468
Merge moyen
1 j 2 h
PR mergées (30 j)
12

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TanStack/virtual

Toutes les issues de TanStack/virtual

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.