Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Scroll lag / stutter when page zoom is exactly 100%

Offen
#1,099 0 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
35/100
Issue-Typ
Bug
Klarheit
Muss geklärt werden
Aktivitätsstatus
Veraltet
Tech-Stack
typescript

Rechercherichtung

Beginne mit der verknüpften Storybook-Reproduktion im FE-WMS-Repository und vergleiche das Scrollen bei 100 % mit 90 % und 110 % Browser-Zoom unter Verwendung von @tanstack/virtual 3.13.5. Untersuche das gemeldete Mess- und Layoutverhalten rund um die virtualisierte Liste und überprüfe anschließend, dass das Scrollen bei allen drei Zoomstufen flüssig und konsistent ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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.
Vorherrschende Sprache
TypeScript
Sterne
7.1k
Forks
472
Ø Merge
1 T. 1 Std.
Gemergte PRs (30 T.)
11

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/virtual

Alle Issues in TanStack/virtual

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.