Blazor Virtualize Feature Bug with Scaled Elements Causing Scroll Errors

[yukking]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

When enabling the Virtualize feature in Blazor, if an element is set with scale, scrolling the table displays errors, resulting in flickering.

This issue was observed after Chrome version 128, likely due to the standardized CSS zoom property causing Blazor Virtualize feature to miscalculate heights.

Expected Behavior

The table should scroll smoothly without any visual distortions, even when elements are scaled.

Steps To Reproduce

Open https://aspnet.github.io/quickgridsamples/virtualizing

Set the body element's scale style to 0.75

Scroll the table and observe the visual errors.

Exceptions (if any)

No response

.NET Version

.net 9

Anything else?

No response

[Serge-N]

• This flickering issue has been there since .NET 8. It should have been hopefully fixed by now.

---

Code Example

@page "/"

<p>This is a test</p>

<div style="height: 800px;overflow-y:scroll">
  <Virtualize TItem="Item" Items="@Items.ToList()" Context="product">
    <p class="my-3"> @product.Name</p>
  </Virtualize>
</div>

@code {
  private IEnumerable<Item> Items => Enumerable.Range(1, 1000).Select(i => new Item { Name = $"Item {i}" });

  class Item
  {
    public string Name { get; set; }
  }
}

Expected Behavior

Scrolling should smooth and all items at that time.

Actual Behavior

Flickering and not taking the full specified height. I tried recording it but the snapping tool could not capture it.

Steps to Reproduce

1. Create a new Blazor Wasm Project with .NET 9 or .NET 8
2. Paste the example code and run

Environment Details

Browser/Framework: Firefox, Chrome and Edge
Operating System: W11
Other Details: .NET 9

Please advise.

[dariatiurina]

@yukking what are your use cases for using scale? Do you need to apply scale for the whole body element or can you just use scale for the scrolling container for Virtualize?