Angular Material CDK scrolling - Display a million items is not working...

[mahop-net]

How to Reproduce:

• Take the first example from https://material.angular.io/cdk/scrolling/examples open it in stackblitz an display 1 Mio instaed of 100,000
• Scroll down to the end. The last item displayed is 213,043

Cause:

• Maximum height of single Elements in Browsers

Possible Solution:

• Use more than one element inside the ViewPort to render Items

[dev-ptera]

Was there ever a solution found to this? I'm encountering the same issue & my dataset involves elements with >1M.

[viniciusschuelter]

This is actually a navigator limitation(values), i cant see a easy way to solve this, maybe if create constants with the height limit per browser we can do some handling. But what would it be? any ideas @crisbeto @mmalerba

[mmalerba]

I looked into this at one point and its pretty tricky. IIRC its not just height that breaks down, but scrollTop as well. Even if I used multiple elements for the spacer, I couldn't figure out a good method of figuring out where the user was scrolled to

[MaximPVladimirovich]

I played with the the example in stackblitz. I changed the itemSize to 1 and removed appendOnly. It's a temporary fix. https://stackblitz.com/edit/angular-eb1m1s?file=src/app/cdk-virtual-scroll-append-only-example.ts. I'll dig deeper and see if I can figure out what might be the underlying problem.

[viniciusschuelter]

Idk, the limitation continue, change de size array of 10kk to 50kk and u can see what happening, the last item will be "Item #33554133" the exact chrome height limitation. And also this virtualization is kinda weird, if u set de itemSize to 1px the item-list should 1px as well, but actually have 50px so the virtualization is rendering 50x more than necessary.

[MaximPVladimirovich]

It seems to be ok here.

[viniciusschuelter]

Try with 50kk instead of 10kk, another way to check something is wrong is open your inspector and count what is currently rendered "document.getElementsByClassName("example-item").length", the result will be 400 items 50x more than correct , which should be 8 items.