-
Notifications
You must be signed in to change notification settings - Fork 10.5k
Fix the bug with scrolling in Virtualize component with scaled elements #64013
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
There was a problem hiding this comment.
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 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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good job! The comments are mostly optional changes/questions.
src/Components/test/testassets/BasicTestApp/VirtualizationScale.razor
Outdated
Show resolved
Hide resolved
d83ab62 to
b3b3f28
Compare
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%.
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.
Uh oh!
There was an error while loading. Please reload this page.
Fix the bug with scrolling in Virtualize component with scaled elements
Description
This pull request improves the
Virtualizecomponent’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.
ItemSizedescriptionaspnetcore/src/Components/Web/src/Virtualization/Virtualize.cs
Line 91 in a54e8df
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:
Changes:
Virtualize.tsto detect and correctly handle CSS scale, zoom, and transform properties on parent elements, adjusting scroll calculations so virtualization works accurately under scaling scenarios.CanScrollWhenAppliedScaleto verify that virtualization works when CSS scale is applied.Fixes #59354