aspnetcore: Virtualize scrolling is broken when using display:grid on panel and display:content on rows

Describe the bug

Following code worked fine in .NET 5, but is broken in .NET 6

.grid {
    display: grid;
    grid-template-columns: 1fr;
}
.grid-row {
    display: contents;
}

<div class="grid" style="height: 800px; overflow: auto">
    <Virtualize TItem="Item" ItemsProvider="GetItemsAsync">
        <div class="grid-row" @key="context">
            <div class="grid-cell">
                @context
            </div>
        </div>
    </Virtualize>
</div>

Notice that as I scroll down, I get pages in rows in wrong order: 13**, then 14** then 13**.

screen

This only happens when the item have style display: contents;.

To Reproduce

Go to: https://blazorrepl.telerik.com/QllPPqbK57ftwhga22
Scroll down 50%;
Try to scroll slowly. You will see flickering and incorrect order or rendered items.

Further technical details

ASP.NET Core version 6:00

dotnet --info Output

.NET SDK (reflecting any global.json):
 Version:   6.0.100
 Commit:    9e8b04bbff

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.22000
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\6.0.100\

Host (useful for support):
  Version: 6.0.0
  Commit:  4822e3c3aa

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 15 (6 by maintainers)

Most upvoted comments

Thanks for clarifying what you’re looking for! I meant it’s a grid in the sense that people call this kind of UX a grid, not in the sense of the HTML elements being used.

As far as I’m aware there’s nothing specific to the approach in QuickGrid that necessitates the use of <table> etc, as a set of <div> elements with display:table etc would produce the same result. It’s normally considered preferable to use real <table> (etc) elements for the purpose of guiding accessibility technologies, even if in this case we also put some invisible <div> elements in there (which are actually styled as display:table-row so it’s equivalent as far as the layout engine is concerned).

You might be able to adapt the approach in QuickGrid to be structured as you want but I can’t promise that for sure.

SteveSandersonMS on Jan 19, 2022

There’s an example of a grid at https://github.com/SteveSandersonMS/BlazeOrbital/tree/main/BlazeOrbital/QuickGrid that uses virtualization and position: sticky on headers (here). Not sure whether that will help.

I know it’s tricky to make all this stuff work together, which I why I think the framework should include a base implementation people can build on: https://github.com/dotnet/aspnetcore/issues/37908

SteveSandersonMS on Jan 18, 2022