Aspnetcore: Blazor virtualization does not work properly

[MarvinKlein1508]

Describe the bug

The virtualization does not render more elements when scrolling. It only works for me if I right click in the browser and click on inspect element on the last row. I need to click on the div for the new elements once in the DOM in order to get it working while scrolling.

I tried it in Chrome and Firefox (Latest versions)

To Reproduce

I have created a small repository which has the same behaviour as mentioned above.
https://github.com/MarvinKlein1508/BlazorVirtualization

Exceptions (if any)

None.

Further technical details

• ASP.NET Core version: 5.0.0-rc.1.20451.17
• Include the output of dotnet --info:
  .NET Core SDK (gemäß "global.json"):
  Version: 5.0.100-rc.1.20452.10
  Commit: 473d1b592e

Laufzeitumgebung:
OS Name: Windows
OS Version: 10.0.19041
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\5.0.100-rc.1.20452.10\

Host (useful for support):
Version: 5.0.0-rc.1.20451.14
Commit: 38017c3935

.NET SDKs installed:
3.1.400-preview-015203 [C:\Program Files\dotnet\sdk]
3.1.402 [C:\Program Files\dotnet\sdk]
5.0.100-rc.1.20452.10 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
Microsoft.AspNetCore.All 2.1.21 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.1.22 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.App 2.1.21 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.1.22 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.1.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.1.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.0-rc.1.20451.17 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 2.1.21 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.1.22 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.7 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.8 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.0-rc.1.20451.14 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 3.1.7 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 3.1.8 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.0-rc.1.20452.2 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

To install additional .NET runtimes or SDKs:
https://aka.ms/dotnet-download

• Visual Studio Version 16.8.0 Preview 3.1

[pranavkm]

This might be a dupe of https://github.com/dotnet/aspnetcore/issues/26353 which was addressed in 5.0-rc2. Could you try using our nigthtlies to see if using it resolves your issue: https://github.com/dotnet/installer#installers-and-binaries.

[SteveSandersonMS]

To me it looks more like a dupe of #25915. To check whether this is the case, could you try amending your repro to specify an ItemSize parameter on your <Virtualize>? If the ItemSize you pass is correct, does the problem go away?

[MarvinKlein1508]

@pranavkm I created the same project with RC2. Now I don't get any more results, not even after I have inspected the element.
@SteveSandersonMS adding an ItemSize makes it worse. E.G. when I set it to 40, I instantly see some results with ID 3900+ those become hidden after a few seconds and it returns back to the default view which again does not work while scrolling.

[MarvinKlein1508]

Hello again,

I have seen this in the DOM:
<div style="height: 975152,8px;" _bl_065e16a4-efdb-4e97-87b3-eb034b1e0ab9=""></div>

Firefox says the following: Invalid value for heigth attribute. Perhaps it helps when you switch from , to .

[SteveSandersonMS]

Oh wow yes, this is a really striking bug. The <Virtualize> component incorrectly uses culture-specific formatting for the spacer height values, leading to being totally broken if the browser language uses , as the decimal separator.

I checked your repro example and it works fine with my browser by default, but if I switch the language to one that uses , as decimal separator, I also observe that it is broken. Thanks for reporting this, @MarvinKlein1508!

@dotnet/aspnet-blazor-eng This is definitely something we'll want to fix. It's a one-liner fix.

[SteveSandersonMS]

Submitted PR with a fix at https://github.com/dotnet/aspnetcore/pull/26432