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?