Blazor 5.rc2 Virtualize component scrolling breaks mid scroll in edge and chrome

[radderz]

Describe the bug

When using the scroll bar in edge (chromium) or chrome the scroll breaks part way through. This doesn't happen in firefox.

To Reproduce

Have a large list of fixed height 100px rows, and try to scroll using the scroll bar, partway through dragging the scroll bar it'll deselect the scroll bar and the scrolling will stop

[mkArtakMSFT]

Thanks for contacting us.
@SteveSandersonMS can you please look into this? Thanks!

[jakubmaguza]

Hi,

I'm having exactly the same issue. I used very simple Virtualize component using blazor template.
My changes:

<Virtualize Context="forecast" ItemsProvider="@LoadData">
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
</Virtualize>

Instead of standard foreach.

LoadData is:

int totalEmployees = 30000;
private async ValueTask<ItemsProviderResult<WeatherForecast>> LoadData(ItemsProviderRequest request)
    {
        Console.WriteLine($"{request.StartIndex} - {request.Count}");
        var numEmployees = Math.Min(request.Count, totalEmployees - request.StartIndex);
        var forecast = await Http.GetFromJsonAsync<List<WeatherForecast>>($"WeatherForecast/StartAt/{request.StartIndex}/Take/{numEmployees}");
        return new ItemsProviderResult<WeatherForecast>(forecast, totalEmployees);
    }

And controller:

        [HttpGet("StartAt/{start:int}/Take/{count:int}")]
        public IEnumerable<WeatherForecast> Get(int start, int count)
        {
            var rng = new Random();
            return Enumerable.Range(start, count).Select(index => new WeatherForecast
            {
                Date = DateTime.Now.AddDays(index),
                TemperatureC = rng.Next(-20, 55),
                Summary = Summaries[rng.Next(Summaries.Length)]
            })
            .ToArray();
        }

Using this, whenever I'm trying to scroll with mouse (or using End key), the view is corrupted in Chrome. It works fine in Firefox.

[SteveSandersonMS]

What do you mean by “the view is corrupted”? Can you post a screenshot or video?

[radderz]

Not corrupted, the scroll breaks, its stops scrolling during a drag. And you have to click on the scroll bar caret to begin scrolling again.

Basically, you can't click and drag the scroll bars caret/box thing in edge/chrome.

[SteveSandersonMS]

Is there any chance you could post a video of this happening? I haven’t been able to repro it myself and am looking for clues about what exactly might be happening.

[jakubmaguza]

Hi Steve,
I was trying to reproduce what I have seen today in the morning, but without success.
In the morning I was facing the issue you can see on this recording:
#26353 (comment)

Now it's different. Now after scrolling little bit, I cannot see any new items. Either using ItemProvider or Items property of Virtualize component, it's the same. Browser also doesn't matter. If you will see the gif I'm uploading now, you can see this issue. This is after publishing app.

After using Home and End keys on keyboard few times, it starts to work. I did open console so you can see, that no request is sent upon scrolling at the beginning.

You can see my repo here: https://github.com/jakubmaguza/GitHub26870

I did check this on another machine which is Win7, and it's placed in different country. The issue is exactly the same.

[SteveSandersonMS]

@jakubmaguza Thanks for the video and repro code. What you're seeing there is a known issue - #25915. There is a straightforward workaround for #25915 which is providing an ItemSize parameter to the <Virtualize> component.

For example, change your use of <Virtualize> to:

<Virtualize Context="forecast" ItemsProvider="LoadData" ItemSize="10">

My guess is that @radderz was reporting a different problem, so if anyone is still able to repro that, I'd love to see a video or other clues about what's going on.

There is one other known issue in <Virtualize> which is that in some cases, the scrollbar gets out of sync with the mouse position. Note that:

• This only happens in Chromium desktop browsers, not Firefox or mobile browsers, so arguably it's a browser bug but we'd certainly like to work around it if we can.
• It's not unique to Blazor's <Virtualize> component. The same defect repros in react-window (at least in variable-size mode), in react-virtuoso (in all cases), and in Angular's virtual scroll dynamic sizing prototype and in vue-virtual-scroller. So it really does appear to be a Chromium bug.

So far we haven't identified a workaround for that one. Perhaps this is what @radderz was originally reporting but the description does sound a bit different, which is also why I was hoping to see a video of it :)

[jakubmaguza]

@SteveSandersonMS
Thanks Steve. I'm now able to reproduce this bug from the morning. The same from attached comment #26353 (comment)

What I did, I add ItemSize to my Virtualize component:

<Virtualize Context="forecast" ItemsProvider="@LoadData" ItemSize="50">

And now it looks like this:

I pushed this change to my repo: https://github.com/jakubmaguza/GitHub26870
Most of the time I'm able to reproduce this with either rapid scroll movement or using End/Home keys on my keyboard

[SteveSandersonMS]

@jakubmaguza I think your example is still affected by two known issues:

• You are still affected by Blazor Virtualize 22-25 items  #25915 because the true item size is very close to the value you've given, but isn't exactly right. By default with that CSS the row height is 48.89px, not 50px. You need to give the exact correct value, or a value that's sufficiently wrong to trigger the auto-calculation. That's why I suggested 10px - please try that, or use ItemSize="48.89f".
• I suspect you are also affected by Fix virtualization culture invariance #26432 which we have fixed for the final 5.0 release but was not fixed in time for the 5.0 RC2 release. To check, try setting your browser language to English (e.g., English US or British English) and see if the problem goes away.

[radderz]

I have also seen what @jakubmaguza has seen, the issue I am explaining is a little different.

At the start of the below gif, I did normal scroll wheel scrolling, then I start pulling the scroll bar down, and the scrolling breaks part way through, and it stops scrolling without me lifting the mouse. I have to click on it again to start again, but you'll see its breaking alot. The item

I tried to recreate the issue, but my layout is a bit more complex with grid based layouts in the real app. When doing this with a simple virtualize panel that is 100% height with overflow-y scroll, I don't seem to get the issue.

[SteveSandersonMS]

@radderz Thanks for the update. It does look like your issue might be different. We only have a couple of days left for final fixes to 5.0, and the only chance we’d have of fixing your issue would be if we had a repro. Is there any chance you could post code that reproduces that issue?

[jakubmaguza]

@jakubmaguza I think your example is still affected by two known issues:

• You are still affected by Blazor Virtualize 22-25 items  #25915 because the true item size is very close to the value you've given, but isn't exactly right. By default with that CSS the row height is 48.89px, not 50px. You need to give the exact correct value, or a value that's sufficiently wrong to trigger the auto-calculation. That's why I suggested 10px - please try that, or use ItemSize="48.89f".
• I suspect you are also affected by Fix virtualization culture invariance #26432 which we have fixed for the final 5.0 release but was not fixed in time for the 5.0 RC2 release. To check, try setting your browser language to English (e.g., English US or British English) and see if the problem goes away.

Thanks Steve, it looks like mostly it was #26432. This is no longer the case.

About 50px row height, my browser did show me 49px, which i used. To be 100% sure, I make change in table row definition:

<tr style="height: 50px;">

So now it should fit ItemSize="50".

So now all my browsers are set to English, <tr> is set to 50px, and ItemSize=50.

In firefox scrollbar works perfectly well (right browser), but after switching to edge (or chrome) (left browser), after scrolling half way it is no longer synced with mouse.

I pushed those changes to my GitHub: https://github.com/jakubmaguza/GitHub26870

PS: I'm not using any of those 2 browsers for my daily routines, so there are no user specific settings there.
PS2: I did run the same published app on my other machine which is placed in England (with all english culture specific settings), and I can confirm the same issue.

[SteveSandersonMS]

@jakubmaguza The scroll bar sync issue is the Chromium bug I mentioned above. It’s not Blazor specific - I linked to samples showing the same in React, Angular, and Vue apps.

[jakubmaguza]

That's right, thanks again. Sorry for posting too much.

Saying all that, you can find @radderz issue in f.e. angular example you posted, or any page that contains scrollbar. Looks like this is chromium issue.

Some of the times, you will find this issue scrolling through list using wheel, and then grabbing scrollbar, but all of the time it is when you are using mouse wheel while hovering mouse over scrollbar. Check here:

[radderz]

@SteveSandersonMS - I could share with your the full project privately as it's currently just a test of porting our website to Blazor but I wouldn't be able to share that publicly. I wasn't able to recreate the issue using a small project as I am guessing its a combination of things in the overall layout.

It's quite possible this isn't specifically a Blazor issue, like @jakubmaguza is saying. As this is not an issue in firefox with the same code.

[SteveSandersonMS]

Thanks @radderz. If this is something you find is Chromium-specific (doesn't repro in Firefox), and only happens in your project and not in simpler test cases, then there's a high likelihood that it's not a Blazor issue. It might be something really unique about something else going on in your project or might be a general Chromium behavior.

Since we've now fixed the definite known issue (#25915) and are already following up with the Edge team about the scrollbar sync glitch, it looks like there's no more direct action we can take on this issue. But if anyone else is able to repro the "scrollbar stops" issue in a way they believe is a Blazor bug, please file a new issue and post repro code!