Scroll lag / stutter when page zoom is exactly 100%
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 35/100
- issue の種類
- バグ
- 明瞭さ
- 説明が足りない
- 活発さ
- 停滞
- 技術スタック
- typescript
- 領域
- frontend, performance
調査の方向性
FE-WMSリポジトリにあるリンク先のStorybook再現から始め、@tanstack/virtual 3.13.5を使用して、ブラウザズーム100%時と90%および110%時のスクロールを比較します。仮想化リスト周辺で報告されている測定とレイアウトの挙動を調査し、その後、3つすべてのズームレベルでスクロールが滑らかかつ一貫していることを確認します。
索引モデルが issue の本文から書いたものです。
説明
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
- Open an app/page that uses
@tanstack/virtual - Set browser zoom to 100%
- Scroll the virtualized list
→ Observe scroll lag / stuttering - Change browser zoom to 90% or 110%
- 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, orResizeObserverbehavior 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.
- 主要言語
- TypeScript
- スター
- 7.1k
- フォーク
- 472
- 平均マージ
- 1日 1時間
- マージ済み PR（30日）
- 11
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
TanStack/virtual のほかの 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)対応中かも @webn00b が 12 日前に担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
anchorTo: 'end' loses the end when the scroll element shrinks対応中かも @langleyd が 1 日前に担当しました。 オープン
難易度 3/5 1〜2日 初心者へのやさしさ 68/100
メンテナーはふだん 1 日以内に返信
-
`scrollToIndex(last, { align: 'end' })` stays short of the end after a measured row grows (virtual-core ≥ 3.17.0)対応中かも @minwookshin が 9 日前に担当しました。 オープン
難易度 4/5 3〜5日 初心者へのやさしさ 55/100
TanStack/virtual#1290 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
virtual-core: desktop Safari drops the prepend anchor write when history lands during the top rubber-band bounce対応中かも このイシューにリンクされたプルリクエストがオープン中、またはマージ済みです。 オープン
難易度 5/5 1週間以上 初心者へのやさしさ 38/100
メンテナーはふだん 1 日以内に返信
-
難易度 4/5 3〜5日 初心者へのやさしさ 62/100
メンテナーはふだん 1 日以内に返信
TanStack/virtual の issue をすべて見る
似ている issue
-
[bug] diagnostics.dumpBody：Buffer 形态请求（透传 lane）跳过 dumps/ 落盘，仅留 raw/-unknown-対応中かも @ranxianglei が今日担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
ranxianglei/billion-context#2421 · コメント 2 件 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
platformatic/mcp#216 ·
メンテナーはふだん 1 日以内に返信
-
pending triage
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
nuxt/test-utils#1842 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100
MoonshotAI/kimi-code#4146 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100
farbenmeer/tapi#531 ·