UTable virtualization causes continuous scroll jitter with variable-height rows
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.9k
- Forks
- 1.1k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 57
Description
Environment
Nuxt project info:
| Operating system | Linux 5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36 |
| CPU | Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz (8 cores) |
| Node.js version | v22.22.3 |
| nuxt/cli version | 3.37.0 |
| Package manager | pnpm@8.15.6 |
| Nuxt version | 4.4.6 |
| Nitro version | 2.13.4 |
| Builder | vite@7.3.6 |
| Config | css, devtools, modules |
| Modules | @nuxt/ui@4.11.0 |
│
Is this bug related to Nuxt or Vue?
Vue
Package
v4.x
Version
v4.11.0
Reproduction
https://stackblitz.com/edit/jemk8umy-vgu51h5j
Description
When virtualization is enabled on UTable, tables with variable-height rows may continue changing their total height even after scrolling has stopped.
This causes the scroll position to move without user input. Sticky elements and surrounding UI may also continuously re-render and visibly jitter.
Steps to reproduce
- Open the reproduction.
- Scroll down inside the virtualized table.
- Stop scrolling when rows with different content heights are visible.
- Observe the scrollbar and the table's total height.
The reproduction also passes a measureElement callback through the virtualize prop, but the callback is never invoked.
Expected behavior
Rendered rows should be measured dynamically, and the virtualizer should update their sizes without causing the scroll position to jump.
Actual behavior
The virtualizer continues relying on the estimated row size while the rendered rows have different actual heights. The table's total height and scroll position keep changing, causing visible scroll jitter.
https://github.com/user-attachments/assets/9ab374c2-03c2-4565-93fa-2b671d546ade
Additional context
This appears to be related to #6101 and the still-open PR #6379. However, the issue was closed without a resolution, and the PR has not been merged yet
Logs
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the StackBlitz reproduction and UTable's virtualize prop, especially the measureElement callback described in the issue. Compare the unresolved behavior with issue #6101 and PR #6379; done means variable-height rows are measured dynamically without continued total-height changes, scroll jumps, or visible jitter.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxtjs, typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100