nuxt / nuxt/ui

UTable virtualization causes continuous scroll jitter with variable-height rows

Open
#6,907 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

triage
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
  1. Open the reproduction.
  2. Scroll down inside the virtualized table.
  3. Stop scrolling when rows with different content heights are visible.
  4. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.