Blazor Virtualization flickers when scrolling

[cplaiu]

I'm trying to create a grid layout using display: grid, but I noticed that when the items are rendered, the first and last child elements of the grid appear empty due to the placeholder divs generated by the Virtualize component.

I attempted to fix this issue with the following CSS:

.ns-container-product > div:first-child,
.ns-container-product > div:last-child {
  min-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  grid-column: 1 / -1;
}

However, this solution creates a full empty row, which sometimes results in unwanted blank space.

I also tried using display: contents;, but in that case, the items are not rendered the first time the component loads.

As an alternative, I switched to using flex-wrap: wrap, but this causes a noticeable flicker when scrolling.

It seems that this behavior might be related to the following issue: dotnet/aspnetcore#39468.

I've attached a sample project where the problem can be reproduced, along with a video showing the flicker effect.

VritualizeBlazorNET8.

2025-10-23.11-06-08.mp4

[javiercn]

@cplaiu thanks for contacting us.

That's likely a result of the data loading speed.

You can define placeholders for virtualize to render in place, and you can also increase the overscan count to remove the flickering.

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/virtualization?view=aspnetcore-9.0#placeholder
https://learn.microsoft.com/en-us/aspnet/core/blazor/components/virtualization?view=aspnetcore-9.0#overscan-count

Let us know if that helps

[maritogram]

The virtualization component has always had a hard time dealing with flex containers (or something along those lines), it can't correctly measure the spacers (that are based on your total item count) between the actual items - other issues arise when you throw in an async itemsprovider into the mix too. I looked a little bit into it a while back in #61156 but I couldn't come to a nice conclusion as life picked up.

Workarounds have to do with manipulating the css to make the blazor component happily calculate the spacers, like having .container > div { width: 1px;} where 'container' is the class name or identifier that wraps your virtualize component (should also have that container's width set for prettier results, either with 100% or something else) - this causes other smaller issues sometimes, which I still believe have to do with flex maybe.

Anyhoo, that's my input on the issue, take with a grain of salt, hope it's figured out. Buena suerte.

[cplaiu]

I’ve increased the OverscanCount value from 5 to 15 and added a Placeholder, but I still don’t see anything rendered there — it remains blank.

I also tried the suggestion from @maritogram to add a width: 1px style to the inner div inside the wrap container.

What I’ve noticed is that when there’s only a small number of items (or maybe it’s just my impression, because sometimes it seems to work and then starts flickering again), everything seems to work fine. However, when there are, for example, 1500+ items, the issue reappears.

I’m using an async ItemsProvider because when the user scrolls, I need to download additional item properties dynamically.
The download process uses a Task.WhenAny() combined with StateHasChanged() inside, since I need the properties to be downloaded in the background.

I’ve attached a short video where you can see the flickering issue. At the beginning, it scrolls normally, but after some point, the flickering starts. All the cards have the same height.