Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VirtualScroll fails to render items correctly for over 559239 items #193

Closed
peto-lisy opened this issue Apr 18, 2016 · 5 comments
Closed

Comments

@peto-lisy
Copy link

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

screen shot 2016-04-18 at 16 31 55

Last fully rendered item is 559239.

Used browser: Chrome 49 on OS X

@Guria
Copy link

Guria commented Apr 18, 2016

@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
Copy link

Guria commented Apr 18, 2016

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

@Guria
Copy link

Guria commented Apr 18, 2016

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
Copy link
Owner

bvaughn commented Apr 18, 2016

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
Copy link
Contributor

fixed-data-table had a similar issue (facebookarchive/fixed-data-table#251): after 16777200px links stop working, and after 33554450px it stops rendering.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants