Components: Virtual scroll has a scroll size limit

[ernestbofill]

What is the expected behavior?

The scroll is next to unlimited in its length

What is the current behavior?

Scrolling reaches it's limit at 3.3553e7px

What are the steps to reproduce?

There should be 1 Million items 191739 are reachable
https://stackblitz.com/edit/angular-material2-issue-mlhd9q

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

    "@angular/cdk": "7.0.2",
    "@angular/core": "7.0.1",

Google Chrome
Version 71.0.3578.98 (Official Build) (64-bit)

Is there anything else we should know?

It doesn't seem to be a browser limit. I have been able to create a larger scroll area than the limit above and also successfully used translateY() with a greater value.'

---

UPDATE:
I tried to debug it and found out the culprit is in the measureScrollOffset(): it starts to return wrong values at around 50.000.000px

https://github.com/angular/material2/blob/b51f14350200d1d0e9ad8c96485fd6dfe6e7a180/src/cdk/scrolling/scrollable.ts#L148

el.scrollTop returns a wrong value.

[mmalerba]

I've marked this as P5 because I'm not sure if it is feasible due to the incorrect measurements the browser reports

[ernestbofill]

I find it strange that the issue reproduces in any browser that I tested. Is this a known issue?

[mmalerba]

Yes, browsers have limits on the size of elements. It would be possible to work around those limits by stacking multiple elements, except that the limit also appears to apply to scrollHeight/scrollTop https://jsfiddle.net/malerba89/gbzwrcuv/

[manju-reddys]

I wrote blog and implemented a solution to this issue: Read here