Skip to content

Fix Virtualize scroll jump caused by native overflow-anchor double compensation#67781

Draft
ilonatommy wants to merge 5 commits into
mainfrom
fix-67729-native-anchoring
Draft

Fix Virtualize scroll jump caused by native overflow-anchor double compensation#67781
ilonatommy wants to merge 5 commits into
mainfrom
fix-67729-native-anchoring

Conversation

@ilonatommy

@ilonatommy ilonatommy commented Jul 14, 2026

Copy link
Copy Markdown
Member

Fixes #67729

A regression (introduced by #65951) where Virtualize would eventually converge to start/end of the list incremental scrolling, even when the scroll diff was small. It happened when the declared ItemSize differs from the real rendered row height. It doesn't occur in the case when real items match the declared sizes.

Background

The viewport stabilization PR reserved-height spacers that Virtualize resizes as it discovers the true item sizes (let's call it mechanism A). The browser's native CSS overflow-anchor also tries to keep the scroll position stable across those layout changes (mechanism B).
The two mechanisms were by design supposed to not overlap. However, a case where the overlap happens was overlooked. That case is scroll-driven redistribution where the spacer's estimated height differs from the real rendered height. When both mechanisms are stacked, the scroll offset is over-corrected and snapping the viewport to the top/bottom happens.

Fix

Suppress native overflow-anchor synchronously during scroll-driven spacer redistribution (processIntersectionEntries), so the browser doesn't compensate on top of our spacer resize.
Restore it (overflowAnchor = '') synchronously on the first non-scroll render (refreshObservedElements), guarded against convergence states.

This mirrors the synchronous convergence-anchor toggling already used by viewport stabilization PR that uses the mechanism A when mechanism B is not available/reliable.

Tests

  • Changed the size mismatch in existing component that was already testing size mismatch scenarios so that the bug manifests even more vividly (30 / 50 px vs original 49 / 50 px).
  • The bug reproduces deterministically both on the E2E test and on manual tests.
incorrect-item-sixe-fixed.mp4

@ilonatommy ilonatommy added this to the 11.0-preview7 milestone Jul 14, 2026
@ilonatommy ilonatommy self-assigned this Jul 14, 2026
@ilonatommy
ilonatommy requested a review from a team as a code owner July 14, 2026 13:34
Copilot AI review requested due to automatic review settings July 14, 2026 13:34
@ilonatommy ilonatommy added area-blazor Includes: Blazor, Razor Components feature-blazor-virtualization This issue is related to the Blazor Virtualize component labels Jul 14, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Fixes a Virtualize regression where incremental scrolling could “snap” toward the start/end when ItemSize differs from actual rendered item height, by avoiding double scroll-compensation between Virtualize’s reserved-height stabilization and the browser’s native overflow-anchor.

Changes:

  • Toggle overflow-anchor on the scroll element during scroll-driven spacer redistribution to prevent native anchoring from over-correcting.
  • Update the BasicTestApp virtualization test asset to produce a stronger item-size mismatch scenario.
  • Add an E2E test + helper script to detect large per-step scroll jumps in an overflow container.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File Description
src/Components/Web.JS/src/Virtualize.ts Adjusts native scroll-anchoring behavior during scroll-driven spacer redistribution to prevent over-compensation.
src/Components/test/testassets/BasicTestApp/VirtualizationComponent.razor Tweaks the mismatch scenario (declared vs actual height) used by tests to reproduce the regression more deterministically.
src/Components/test/E2ETest/Tests/VirtualizationTest.cs Adds an E2E regression test and JS helper to detect large jump deltas during incremental container scrolling.

Comment thread src/Components/Web.JS/src/Virtualize.ts
@ilonatommy

Copy link
Copy Markdown
Member Author

This PR has faulty regression tests, converting to WIP

@ilonatommy
ilonatommy marked this pull request as draft July 15, 2026 09:49
@dariatiurina dariatiurina self-assigned this Jul 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area-blazor Includes: Blazor, Razor Components feature-blazor-virtualization This issue is related to the Blazor Virtualize component

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Virtualize unexpectedly jumps to the beginning/end of the list while scrolling after PR #65951 (.NET 11 Preview 4 regression)

3 participants