Window & Dynamic Size List Virtualization Causes Mobile Safari IOS Scroll Momentum Interruption
Les mainteneurs répondent en général sous 1 jour
Personne n'a encore pris cette issue.
Évaluation
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Accessibilité débutants
- 35/100
- Type d'issue
- Bug
- Clarté
- Plutôt claire
- Activité
- À l'abandon
- Stack technique
- react, typescript
- Domaine
- frontend, performance
Piste de recherche
Commencez par la reproduction CodeSandbox fournie et l’exemple useWindowVirtualizer, puis testez-les sur Mobile iOS Safari avec des éléments de taille dynamique. Étudiez l’interaction entre les éléments mesurés qui sont virtualisés et l’inertie du défilement de la fenêtre ; le travail est terminé lorsque la reproduction conserve un défilement fluide avec inertie tandis que la virtualisation reste active.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Description
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.
- Langage dominant
- TypeScript
- Étoiles
- 7.1k
- Forks
- 468
- Merge moyen
- 1 j 2 h
- PR mergées (30 j)
- 12
Préparer son environnement
- Aucun Dockerfile ni fichier Docker Compose
- Propose un modèle de pull request
- Lire le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Autres issues de TanStack/virtual
-
Difficulté 2/5 1-3 heures Accessibilité débutants 78/100
Les mainteneurs répondent en général sous 1 jour
-
Difficulté 4/5 3-5 jours Accessibilité débutants 55/100
TanStack/virtual#1290 · 1 commentaire ·
Les mainteneurs répondent en général sous 1 jour
-
Difficulté 5/5 Plus d'une semaine Accessibilité débutants 38/100
Les mainteneurs répondent en général sous 1 jour
-
Difficulté 4/5 3-5 jours Accessibilité débutants 62/100
Les mainteneurs répondent en général sous 1 jour
-
Difficulté 4/5 3-5 jours Accessibilité débutants 55/100
Les mainteneurs répondent en général sous 1 jour
Toutes les issues de TanStack/virtual
Issues similaires
-
needs:triage
Difficulté 2/5 1-3 heures Accessibilité débutants 84/100
Les mainteneurs répondent en général sous 1 jour
-
ai-discovered
Difficulté 2/5 1-3 heures Accessibilité débutants 83/100
Les mainteneurs répondent en général sous 1 jour
-
Difficulté 2/5 1-3 heures Accessibilité débutants 88/100
jessepollak/home#1627 ·
Les mainteneurs répondent en général sous 1 jour
-
agent-canvas bug llm priority:low ready-for-dev
Difficulté 2/5 1-3 heures Accessibilité débutants 82/100
OpenHands/OpenHands#17806 · 3 commentaires ·
Les mainteneurs répondent en général sous 1 jour
-
bug
Difficulté 2/5 1-3 heures Accessibilité débutants 76/100
radius-project/ai-extensions#923 ·
Les mainteneurs répondent en général sous 1 jour