CdkVirtualScrollViewport spacer cannot exceed 1533917px in IE/Edge

grant77 commented 6 years ago

Bug, feature request, or proposal:

The spacer in the virtual-scroll-viewport.html should account for the IE/Edge max size limitation of 1533917px. In the old angular material, they did account for it in the md-virtual-repeat-container directive. Go to "VirtualRepeatContainerController.prototype.sizeScroller_" method in https://raw.githubusercontent.com/angular/material/master/src/components/virtualRepeat/virtual-repeater.js to see. They basically just append several children to the spacer until the desired height is reached. They do this because no single element can exceed 1533917px, but several elements together can.

What is the expected behavior?

We should be able to exceed a virtual scrollHeight of 1533917px.

What is the current behavior?

We can not exceed a virtual scrollHeight of 1533917px.

What are the steps to reproduce?

Use a huge array as your data source.

What is the use-case or motivation for changing an existing behavior?

One of the primary reasons for using virtual scroll is when you have big data sources. Currently, big data sources don't work right.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.1.0-rc.0 Angular Material 6.3.3 Typescript 2.9.2 IE 11 or any version Edge 42.17134.1.0

Is there anything else we should know?

No

jorroll commented 6 years ago

Link to VirtualRepeatContainerController.prototype.sizeScroller in source

mmalerba commented 6 years ago

I believe I did some looking into this when I started and found that though stacking multiple elements did allow me to create a larger scrollable content, there were some issues with scrollHeight and scrollTop returning incorrect values that would have thrown off the scrolling logic.

I'll so some more experimentation on this eventually, but that's why I didn't add it from the beginning

grant77 commented 6 years ago

Hey mmalerba,

I added a patch to see what would happen, and I did find some issues. I think the scrollTop and scrollHeight are fine until you exceed the max scrollHeights-- Firefox=17895698px, IE/Edge=21474837px, Chrome/Opera=30678340px, Safari=?.

Here is my demo:

https://angular-material2-issue-zudgie.stackblitz.io

Here are the issues I found when scrolling in the demo above:

IE - Works correctly, but scrolling is not smooth at all. You see white space for a forth of a second before rows appear. Also, if you scroll to the end some of my dividers don't appear. Maybe DOM reflow issue? Hopefully, IE will go away soon.
Edge - Same as IE. The white space thing here is acceptable because it is so quick.
Chrome - Awesome! Very smooth scroll.
Opera - Awesome! Very smooth scroll.
Firefox - They have that white space thing going on too, but it is quick. The big problem here is when you scroll past the middle, you no longer have any rows. It appears as though they have a limit of 8947848px for the css translateY.

Note: I calculated the max scrollHeights myself since I could not find them online. I calculated the Firefox translateY manually via the developer tools. At 8947848px I could see all the rows. When I changed it to 8947849px all the rows vanished. This is my first day using stackblitz, so Im not sure which url to include. Here is another one just in case: https://stackblitz.com/edit/angular-material2-issue-zudgie?embed=1&file=app/app.module.ts

manju-reddys commented 5 years ago

Here is my implementation in javascript: CodePen and corresponding article in medium

mmalerba commented 4 years ago

Marking as P4 because I would like to do something about this, but I'm skeptical as to the feasibility. (I will take a look at the links people have posted though, maybe there are solutions I'm just overlooking)

angular / components