Skip to content

Virtualize: visible content shifts when in-DOM items above the viewport change height #65939

@ilonatommy

Description

@ilonatommy

Is there an existing issue for this?

  • I have searched the existing issues

Describe the bug

When an item rendered in the DOM (within the overscan zone) but above the visible viewport changes height, visible content shifts by the full height delta. The user sees a jarring jump - content they were reading moves down or up.

This happens because the Virtualize component sets overflow-anchor: none (https://github.com/dotnet/aspnetcore/blob/main/src/Components/Web.JS/src/Virtualize.ts#L90) on the scroll container to prevent infinite rendering loops caused by spacer resizing. With native browser scroll anchoring disabled, the browser does not compensate scrollTop when content above the viewport changes size.

Originally reported in #25058 (comment):

When the fields are expanded the height of each row is different, and causes strange scrolling issues. For example when more items are loaded the page scrolls to previous rows I have already passed.

Also noted by @SteveSandersonMS in #54742 (comment):

Virtualize explicitly disables overflow anchoring because otherwise it can get into an infinite rendering loop. It might be that overflow anchoring is a good long-term solution if we could find a different solution to the risk of an infinite render loop.

Expected Behavior

When an item in the overscan zone above the viewport changes height (e.g., expand/collapse, image load), the visible content should remain stable — the browser (or the component) should adjust scrollTop to compensate for the height delta.

This is what libraries like react-virtuoso do: they measure height deltas for items above the scroll position and programmatically adjust scrollTop.

Steps To Reproduce

Add DynamicContent_ExpandingInDomOverscanItemAboveViewport that is symmetric to DynamicContent_ItemHeightChangesUpdateLayout

Exceptions (if any)

No response

.NET Version

11.0.100-preview.3

Anything else?

Root cause: overflow-anchor: none is required to prevent oscillation when spacer heights change during measurement convergence. But it also disables compensation for legitimate content size changes (expand/collapse, image loads, dynamic content) in the overscan zone above the viewport.

Metadata

Metadata

Assignees

Labels

area-blazorIncludes: Blazor, Razor ComponentsbugThis issue describes a behavior which is not expected - a bug.feature-blazor-virtualizationThis issue is related to the Blazor Virtualize component

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions