React-virtualized: VirtualScroll fails to render items correctly for over 559239 items

[peto-lisy]

On VirtualScroll https://bvaughn.github.io/react-virtualized/ try creating list with 1M rows.

Last fully rendered item is 559239.

Used browser: Chrome 49 on OS X

[Guria]

@peto-lisy set row height to 1px and it will render more then 30M rows. The reason here is only browser limitations for container height property.

[Guria]

It just pretty unnormal to have such lists, so I guess it wont-fix.

[Guria]

Hmm, with http://jsfiddle.net/thai/zkuGv/4/ I have a much greater value (9007199254740992) which is a lot more achieved with react-virtualized demo. Though this div lost their background somewhere in the middle:

ref: http://stackoverflow.com/questions/7719273/determine-maximum-possible-div-height

[bvaughn]

559,239 (rows) * 60 (row height) = ~33.5 million pixels. According to Stack Overflow, Chrome should be capable of going up to ~134 million total height. There may be other limitations regarding scrollTop though that I'm unaware of.

Setting the row height down to 10 pixels and the total row count to 10 million, I'm still not able to scroll past a scrollTop of ~33.5 million. Even trying to set one programmatically in the Console doesn't work. So I think this is a browser limitation. (FWIW, Firefox has a lower maximum;it will only scroll down to row 298,260.)

As @Guria says, I'm not sure how common it is to have 560k rows of data. If you're displaying anything more than randomly-generated info like in the demo, that's a lot of JSON to parse. You could use a HOC like InfiniteLoader of course but that's still a lot of data to show in a flat list. I'm not sure I believe it's a likely scenario.

So my initial reaction to this is to say that I'm not going to act on it. I appreciate you pointing it out though, so thanks for taking the time to file an issue. :)

If it affects a real world usage of react-virtualized we can talk again. However I'm afraid that without reimplementing scrolling (and losing a lot of advantages provided by browsers WRT off-UI-thread scrolling animations) there's not much that can be done about this. (And reimplementing scrolling is not a path I'm really interested in going down.)

[cesarandreu]

fixed-data-table had a similar issue (https://github.com/facebook/fixed-data-table/issues/251): after 16777200px links stop working, and after 33554450px it stops rendering.