Skip to content

Conversation

@ilonatommy
Copy link
Member

@ilonatommy ilonatommy commented Jan 7, 2026

High level requirements:
#25058 (comment)

This is WIP. Sample changes are not part of the fix.
Visualization of how the sample works with the initial implementation (scrolling with the scroll & jumps with Ctrl + Home or Ctrl + End):

Working-Variable-Height.mp4

Description

Scenarios that we should consider (test/document/log as a separate issue):

  1. Dynamic Height Changes After Initial Render - covered, test added (DynamicContent_ItemHeightChangesUpdateLayout)
    If an item's height changes after it's been measured (e.g., image loads, async content expands, user expands an accordion), the cached measurement should not become stale. If an item that is out of view expands (e.g. item 2 when view is focused on items 10-14), current view does not shift.

  2. Window/Container Resize - covered, tests added (VariableHeight_ContainerResizeWorks)
    When the container width changes, text wrapping changes, causing item heights to change. The cached measurements become invalid.

  3. Extreme Height Variance
    If items vary from 20px to 2000px, the average-based estimation for un-measured items can be wildly inaccurate, causing large scroll jumps.

  4. Memory Pressure from Measurement Cache
    _measuredHeights dictionary grows unbounded. With 1 million items and user scrolling through all of them, we store 1 million floats. Very large datasets or long user sessions with extensive scrolling might be problematic.

  5. Scroll Position Stability (Scroll Anchoring)
    When spacer heights recalculate after measurements update, the browser may "jump" even with overflow-anchor: none. Users might see content shift.

  6. ItemsProvider with Variable Heights - covered, async tests added, slow big load tested manually (see the video)
    Currently we test with Items (synchronous). When using async ItemsProvider, measurements happen as items load. If loading is slow, we might calculate wrong positions.

Async-delay.mp4
  1. CSS Transform/Scale on Container
    We have getCumulativeScaleFactor() but it only checks transform matrix. Other CSS that affects layout (zoom, perspective) might not be handled.

  2. RTL (Right-to-Left) Layout
    Height calculations should be unaffected, but scroll behavior and spacer positioning might differ.

  3. Horizontal Virtualization Interaction
    If someone uses Virtualize inside a horizontal scroll container, our height-based logic doesn't apply. This is probably out of scope, but worth documenting.

  4. Placeholder Height Mismatch
    Placeholders use ItemSize for height. If actual items are much taller/shorter, there's a visual jump when the real item replaces the placeholder. What would happen with placeholders with heights very different from actual content?

  5. First Item at Non-Zero Index
    Related to issue Virtualize first render has upper spacer #64029. If the first visible item isn't index 0, measurements may start from wrong indices.

  6. Empty or Single-Item Lists

  7. Items Collection Mutations
    If items are added/removed from the Items collection, cached measurements reference stale indices. Adding items at beginning, removing items in middle etc.

  8. Test on Multiple Browsers
    Different browsers may fire callbacks at slightly different thresholds or with different batching. Chrome, Firefox, Safari all throttle scroll events differently. getBoundingClientRect() returns sub-pixel values that differ by browser. scrollTop may round differently (integer vs float). IntersectionObserver is a core of virtualization feature. it's mostly standarized acros browsers but edge cases might exist. It would be good to be aware of them.

Contributes to #25058.

@ilonatommy ilonatommy self-assigned this Jan 7, 2026
@ilonatommy ilonatommy added the area-blazor Includes: Blazor, Razor Components label Jan 7, 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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant