- Notifications
You must be signed in to change notification settings - Fork 10.6k
Description
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.