Skip to content

Fix  InitialItemIndex viewport underfill for small indices#67936

Open
ilonatommy wants to merge 5 commits into
mainfrom
fix-67933-small-initial-index
Open

Fix  InitialItemIndex viewport underfill for small indices#67936
ilonatommy wants to merge 5 commits into
mainfrom
fix-67933-small-initial-index

Conversation

@ilonatommy

Copy link
Copy Markdown
Member

Fixes #67933

Problem

Loading a Virtualize (or QuickGrid) at a small InitialItemIndex e.g. 10 rendered only a few rows below the target and left a blank gap at the bottom of the viewport, with no items and no placeholders. The gap only filled once the user manually scrolled.

Example: a 300px container with fixed 50px rows fits 6 rows. InitialItemIndex=10 rendered only items 10–13, leaving room for 14 and 15 empty.

Root cause

InitialItemIndex aligns the target row to the top of the viewport.

On a fresh load, before any spacer-observer measurement has arrived, MoveWindowToContain only has a minimal seed capacity (OverscanCount * 2 + 1). It still reserved OverscanCount rows before the target. Because the target is top-aligned, those leading rows land off-screen (above). The small seed window no longer has enough rows to cover the area below the target.

• QuickGrid (default OverscanCount = 3) -> seed of 7 rows, 3 wasted above -> underfills.
• Pure  Virtualize  (OverscanCount = 15) -> seed of 31 rows, big enough to mask the issue in most cases.

The window would only correct itself via a spacer-observer callback, which is suppressed during a programmatic scroll.

Fix

Don't reserve any rows above the target until the container has actually been measured. A new _hasSpacerFeedback flag records whether that first measurement has happened. Before it does, MoveWindowToContain starts the rendered window right at the target row, so all of the estimated rows go below it and fill the viewport. After the measurement arrives, the flag flips and the normal rows-above-the-target behavior resumes.

@ilonatommy ilonatommy added this to the 11.0-preview7 milestone Jul 21, 2026
@ilonatommy ilonatommy self-assigned this Jul 21, 2026
@ilonatommy
ilonatommy requested a review from a team as a code owner July 21, 2026 12:20
Copilot AI review requested due to automatic review settings July 21, 2026 12:20
@ilonatommy ilonatommy added area-blazor Includes: Blazor, Razor Components feature-blazor-virtualization This issue is related to the Blazor Virtualize component labels Jul 21, 2026
@ilonatommy
ilonatommy temporarily deployed to copilot-pat-pool July 21, 2026 12:21 — with GitHub Actions Inactive
@ilonatommy
ilonatommy temporarily deployed to copilot-pat-pool July 21, 2026 12:21 — with GitHub Actions Inactive

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

This PR fixes a Blazor Virtualize/QuickGrid startup issue where small InitialItemIndex values could leave the viewport bottom underfilled until the user scrolls. It does this by deferring “leading overscan” (items reserved above the target) until the component has received its first spacer/measurement feedback, and adds E2E coverage to prevent regressions.

Changes:

  • Add a _hasSpacerFeedback flag to detect when initial spacer observer feedback has occurred and use it to avoid reserving pre-target overscan during the initial unmeasured window seed.
  • Mark spacer feedback as received when OnBeforeSpacerVisible/OnAfterSpacerVisible run, restoring the normal overscan-before-target behavior after measurement.
  • Add E2E tests asserting that both QuickGrid and Virtualize fill the viewport for small InitialItemIndex values (including a small overscan scenario), plus minor test-asset updates to support the scenario.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File Description
src/Components/Web/src/Virtualization/Virtualize.cs Defers leading overscan until spacer feedback exists to prevent initial viewport underfill.
src/Components/test/testassets/BasicTestApp/VirtualizationAnchorMode.razor Adds a UI toggle to set a small overscan to reproduce/validate the scenario.
src/Components/test/testassets/BasicTestApp/QuickGridTest/QuickGridScrollComponent.razor Adjusts rendered item styling in the scroll/initial-index test component used by E2E coverage.
src/Components/test/E2ETest/Tests/VirtualizationTest.cs Adds E2E assertions ensuring initial-index loads cover the viewport bottom with real items for both QuickGrid and Virtualize.

@ilonatommy ilonatommy modified the milestones: 11.0-preview7, 11.0-rc1 Jul 22, 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 doesn't render items for small InitialIndex until the first scroll

2 participants