Window & Dynamic Size List Virtualization Causes Mobile Safari IOS Scroll Momentum Interruption
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 35/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- react, typescript
- 領域
- frontend, performance
調査の方向性
提供されている CodeSandbox の再現例と useWindowVirtualizer の例から始め、動的なサイズのアイテムを使って Mobile iOS Safari でテストします。仮想化される測定済み要素とウィンドウスクロールの慣性の相互作用を調査します。完了の条件は、仮想化がアクティブなまま、再現例で滑らかな慣性スクロールが維持されることです。
索引モデルが issue の本文から書いたものです。
説明
Describe the bug
By using the useWindowVirtualizer hook to apply virtualization for list items with different heights in relation to window scrolling, when you scroll, the virtualization behavior will occur.
Items that no longer need to be rendered will disappear from the DOM, and the list items corresponding to the visible indices will begin to appear in the DOM.
On Mobile iOS Safari, momentum scrolling triggered by user gestures works, but when combined with virtualization, the momentum effect fails to end smoothly and instead stutters or breaks abruptly. Is there a way to resolve this issue?
import "./styles.css";
import { useWindowVirtualizer } from "@tanstack/react-virtual";
const createRandomHeights = (
min: number,
max: number,
count: number = 1000
) => {
const heights = [];
for (let i = 0; i < count; i++) {
heights.push(Math.floor(Math.random() * (max - min + 1) + min));
}
return heights;
};
const randomHeights = createRandomHeights(100, 400);
const colors = ["red", "yellow", "blue"];
export default function App() {
const virtualizer = useWindowVirtualizer({
count: 1000,
estimateSize: () => 400,
overscan: 5,
scrollMargin: 0,
});
const virtualItems = virtualizer.getVirtualItems();
return (
<div>
<div
style={{
height: `${virtualizer.getTotalSize()}px`,
position: "relative",
width: "100%",
}}
>
<div
style={{
transform: `translateY(${
(virtualItems[0]?.start ?? 0) - virtualizer.options.scrollMargin
}px)`,
position: "absolute",
left: "0",
top: "0",
width: "100%",
}}
>
{virtualItems.map((virtualItem) => {
return (
<div
key={virtualItem.key}
data-index={virtualItem.index}
ref={virtualizer.measureElement}
style={{
paddingTop: "40px",
}}
>
<div
style={{
height: randomHeights[virtualItem.index],
backgroundColor: colors[virtualItem.index % 3],
}}
></div>
</div>
);
})}
</div>
</div>
</div>
);
}
Your minimal, reproducible example
https://codesandbox.io/p/sandbox/qhkvyz
Steps to reproduce
- Go to CodeSandbox Link
- Scroll down Preview Page
- As you scroll, the momentum scroll stops occurring and the scrolling becomes increasingly choppy.
Expected behavior
I hope to maintain a seamless momentum scroll experience.
How often does this bug happen?
Every time
Screenshots or Videos
https://github.com/user-attachments/assets/2b27fcd6-e3de-449b-ac20-2633d76619d3
https://github.com/user-attachments/assets/166be2b0-cab1-495a-a9e1-9b770e31c1fc
Platform
- OS: IOS
- Browser: Safari
- Version: 18.1, 17.6.1
tanstack-virtual version
v3.10.6
TypeScript version
v5.4.5
Additional context
It seems that the CodeSandbox link is difficult to run on Mobile iOS Safari at the moment. However, you can reproduce the issue by running the attached source code.
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
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
TanStack/virtual のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
難易度 4/5 3〜5日 初心者へのやさしさ 55/100
TanStack/virtual#1290 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
難易度 5/5 1週間以上 初心者へのやさしさ 38/100
メンテナーはふだん 1 日以内に返信
-
難易度 4/5 3〜5日 初心者へのやさしさ 62/100
メンテナーはふだん 1 日以内に返信
-
難易度 4/5 3〜5日 初心者へのやさしさ 55/100
メンテナーはふだん 1 日以内に返信
TanStack/virtual の issue をすべて見る
似ている issue
-
Mend: dependency security vulnerability untriaged
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
opensearch-project/security-dashboards-plugin#2545 ·
メンテナーはふだん 1 日以内に返信
-
Add: Dream TR SDオープンcheck:passed streams:add
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
メンテナーはふだん 1 日以内に返信
-
doctor integrity sample scans soft-deleted pages on Postgres (batch path has no deleted_at filter)オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
メンテナーはふだん 1 日以内に返信
-
難易度 1/5 1時間未満 初心者へのやさしさ 72/100
SocialGouv/egapro#4672 · コメント 1 件 ·
メンテナーはふだん 2 日以内に返信
-
area:agents area:tui bug
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
anthropics/claude-code#98358 ·
メンテナーはふだん 1 日以内に返信