Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Scroll lag / stutter when page zoom is exactly 100%

Aperta
  • Qualcosa non va?
#1,099 0 commenti 1 reazione 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
typescript
Ambito
frontend, performance

Direzione di ricerca

Inizia con la riproduzione Storybook collegata nel repository FE-WMS e confronta lo scorrimento al 100% con lo zoom del browser al 90% e al 110% usando @tanstack/virtual 3.13.5. Analizza il comportamento segnalato di misurazione e layout attorno all’elenco virtualizzato, quindi verifica che lo scorrimento sia fluido e coerente a tutti e tre i livelli di zoom.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Describe the bug
🐛 Bug: Scroll lag / stutter when page zoom is exactly 100%

Description

When using @tanstack/virtual, scrolling becomes noticeably laggy/stuttery if the browser page zoom is set to 100% (default).
Interestingly, the issue disappears and scrolling becomes smooth again when changing the page zoom to 90% or 110%.

This behavior is consistently reproducible and seems to be tied specifically to the 100% zoom level.

🔁 Steps to Reproduce
  1. Open an app/page that uses @tanstack/virtual
  2. Set browser zoom to 100%
  3. Scroll the virtualized list
    → Observe scroll lag / stuttering
  4. Change browser zoom to 90% or 110%
  5. Scroll again
    → Scrolling becomes smooth
✅ Expected Behavior

Scrolling should be smooth and consistent regardless of browser zoom level (including the default 100%).

❌ Actual Behavior

Scrolling is laggy only when zoom is exactly 100%.
Non-100% zoom levels do not show the issue.

🧠 Additional Notes / Observations

  • This may be related to:

    • sub-pixel rounding
    • layout measurements using fractional values
    • getBoundingClientRect, offsetHeight, or ResizeObserver behavior at 100% zoom

  • The issue occurs even on high-performance machines

  • The problem feels like repeated re-layout or recalculation during scroll

🧪 Environment
  • Library: @tanstack/virtual
  • Browser: (Chrome / Edge / Firefox / Brave)
  • OS: (Windows)
  • tanstack/virtual version: 3.13.5
📎 Reproduction

Please clone the repository and run Storybook to reproduce the issue.
http://localhost:6006/?path=/story/components-datagrid--default

Repository:
https://github.com/quanghiep03198/FE-WMS

The issue can be observed directly in Storybook and is isolated to the usage of @tanstack/virtual.

Your minimal, reproducible example

http://localhost:6006/?path=/story/components-datagrid--default

Steps to reproduce

Scrolling should be smooth and consistent regardless of browser zoom level (including the default 100%).

Expected behavior

When using @tanstack/virtual, scrolling becomes noticeably laggy/stuttery if the browser page zoom is set to 100% (default).
Interestingly, the issue disappears and scrolling becomes smooth again when changing the page zoom to 90% or 110%.

This behavior is consistently reproducible and seems to be tied specifically to the 100% zoom level.

How often does this bug happen?

Every time

Screenshots or Videos

https://www.loom.com/share/8fedb0086ade42d5855986d2951c856d

Platform
  • OS: Windows
  • Browsers: Chrome/Edge/Brave
tanstack-virtual version

3.13.5

TypeScript version

5.7.3

Additional context

When using default page zoom (100%)

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.
Lingua principale
TypeScript
Stelle
7.1k
Fork
472
Merge medio
1g 1h
PR unite (30g)
11

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di TanStack/virtual

Tutte le issue di TanStack/virtual

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.