Fix the bug with scrolling in Virtualize component with scaled elements

[dariatiurina]

Fix the bug with scrolling in Virtualize component with scaled elements

Description

This pull request improves the Virtualize component’s handling of CSS scaling and transforms, ensuring correct virtualization behavior when parent elements use scale, zoom, or transform properties. It also adds new test to verify these changes.

The issue was caused by inconsistent scaling algorithm between JS and C#. JS operates on physical units, let's call it physical pixels - scaled pixel values. It used to send physical measurements to C#. C# operates on logical pixels, see e.g. ItemSize description

aspnetcore/src/Components/Web/src/Virtualization/Virtualize.cs

Line 91 in a54e8df

/// Gets the size of each item in pixels. Defaults to 50px.

and it assumed the values received from JS are not scaled. This PR standardizes the sizes to support logical-pixels-based communication between JS and C#.

Alternatives:

• Convert all the calculations and logic of C# code to physical pixels. Component's input parameters can change on each render. If we wanted to convert them to physical values on each change (e.g storing the physical value as a private component member), it brings a similar performance overhead as the currently proposed fix.
• Changing the meaning of the public parameters (from logical pixels to physical pixels) it would be a breaking change.
• Officially decide we do not support scaling of the DOM elements that contain virtualize component. The scale could be used for the virtualize element only. Thanks to this, we would avoid transversing the DOM tree bottom-up - the most costly operation in this change.

Changes:

• Updated Virtualize.ts to detect and correctly handle CSS scale, zoom, and transform properties on parent elements, adjusting scroll calculations so virtualization works accurately under scaling scenarios.
• Added a new test CanScrollWhenAppliedScale to verify that virtualization works when CSS scale is applied.

Fixes #59354

[Copilot]

Pull Request Overview

This PR fixes a bug in the Virtualize component where scroll calculations were incorrect when CSS scaling transforms were applied to parent elements. The issue occurred because the component used physical pixel measurements without accounting for scale factors.

• Adds scale factor detection and compensation logic to handle CSS scale, zoom, and transform properties
• Converts physical pixel measurements to logical pixels for accurate virtualization calculations
• Includes test coverage for the scaling scenario with a new E2E test

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
VirtualizationScale.razor	New test component demonstrating virtualization with CSS scale applied to body
QuickGridVirtualizeComponent.razor	Fixes items provider to respect pagination parameters
Index.razor	Adds new test component to navigation options
VirtualizationTest.cs	Adds E2E test to verify virtualization works with scaling
Virtualize.ts	Core fix - adds scale factor detection and applies compensation to scroll calculations

[ilonatommy]

Good job! The comments are mostly optional changes/questions.

[ilonatommy]

Performance analysis

I used performance.measure to track the increase in time spent in intersectionCallback, when scrolling through the virtualized list. Component used: VirtualizationScale.razor (very simple DOM, the perf will degrade with DOM complexity added). Units: ms.

• scale 100% without the change:

{
  count: 210,
  avg: 0.5190476189766612,
  min: 0,
  max: 1.300000000745058,
  p95: 1
}

• scale 75% with the change:

{
    "count": 313,
    "avg":  0.5769968050927781
    "min": 0,
    "max": 2.5,
    "p95": 1.0999999977648258
}

Average time increase: 11%.

[dotnet-policy-service]

Looks like this PR hasn't been active for some time and the codebase could have been changed in the meantime.
To make sure no conflicting changes have occurred, please rerun validation before merging. You can do this by leaving an /azp run comment here (requires commit rights), or by simply closing and reopening.

[dariatiurina]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 4 pipeline(s).

[dotnet-policy-service]

Looks like this PR hasn't been active for some time and the codebase could have been changed in the meantime.
To make sure no conflicting changes have occurred, please rerun validation before merging. You can do this by leaving an /azp run comment here (requires commit rights), or by simply closing and reopening.