Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

Scroll lag / stutter when page zoom is exactly 100%

Aberta
  • Algo errado?
#1,099 0 comentários 1 reação 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
35/100
Tipo de issue
Bug
Clareza
Precisa de esclarecimento
Status de atividade
Estagnada
Stack de tecnologia
typescript
Domínio
frontend, performance

Direção de pesquisa

Comece com a reprodução vinculada do Storybook no repositório FE-WMS e compare a rolagem em 100% com o zoom do navegador em 90% e 110% usando @tanstack/virtual 3.13.5. Investigue o comportamento relatado de medição e layout em torno da lista virtualizada e, em seguida, verifique se a rolagem é suave e consistente nos três níveis de zoom.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.
Linguagem predominante
TypeScript
Estrelas
7.2k
Forks
479
Merge médio
1d 2h
PRs com merge (30d)
34

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de TanStack/virtual

Todas as issues de TanStack/virtual

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.