Multigrid falls out of sync with 50k+ items when scrollbars are on

bvaughn / react-virtualized

React components for efficiently rendering large lists and tabular data

http://bvaughn.github.io/react-virtualized/

MIT License

26.27k stars 3.06k forks source link

Multigrid falls out of sync with 50k+ items when scrollbars are on #696

Open ghost opened 7 years ago

ghost commented 7 years ago

I'm using MultiGrid to keep a fixed column of row counts. The two grids become less aligned the farther I scroll. I'm seeing this in chrome, firefox, and safari on OSX

Plunker: https://plnkr.co/edit/J8DcI4uva71mXMLVwPua?p=preview

ghost commented 7 years ago

@bvaughn I think this was caused by commit bcb3b3f1c354afc96f4f897b025d68f23e4260c5, that extra cell starts messing with the calculations in ScalingCellSizeAndPositionManager at getOffsetAdjustment once the grid gets past the max scroll size, removing the extra cell count fixed the issue for me.

I'd submit a PR but i'm not sure how best to address the issue without bringing back the issue you were fixing with that commit

bvaughn commented 7 years ago

Thanks for the update and for looking into the issue! I'd love a PR if you find a fix. 😄

nathanpower commented 7 years ago

@rakeljane probably worth checking to see if this has been fixed in 9.9.0 by https://github.com/bvaughn/react-virtualized/pull/727/commits/fe3a3cbf4a539222ac254fa0a32e87def5e7be5e

ghost commented 7 years ago

@nathanpower I'm still seeing it with the latest, worth a shot though! thanks.

nathanpower commented 7 years ago

@rakeljane I had a look at the Plunker, what I am seeing is that there is some loss of sync, but only while scrolling (it corrects itself when scrolling stops) and only when using a track-pad / two-finger scroll. Using an actual mouse scroll-wheel or the scroll-bar seems to work fine. I'm on OSX, tested latest Chrome, Firefox, Safari. Is this what you are seeing, or does it remain out of sync when scrolling stops?

ghost commented 7 years ago

@nathanpower it remains out of sync. It's worse the farther down the grid I scroll. Does the plunkr look right to you when you scroll to the bottom of the grid (just clicking and dragging the scrollbar)? I get this:

edit: also in OSX on chrome

nathanpower commented 7 years ago

Weird... I can't seem to reproduce that, no matter how fast/slow I scroll.

On the plunkr, does dev tools show the request for react-virtualized redirecting to unpkg.com/react-virtualized@9.9.0/dist/umd? Just wondering if you have an older version cached or something.

ghost commented 7 years ago

@nathanpower It looks like the bug only happens if you have scrollbars always showing, changing my OS's setting to "when scrolling" prevents it from happening. It does appear to be pulling 9.9.0

nathanpower commented 7 years ago

@rakeljane sorry, you are right. I should have thought to try that. I can see it now, definitely a different bug to https://github.com/bvaughn/react-virtualized/issues/725

ghost commented 7 years ago

@nathanpower No problem, I'm glad we were able to narrow the bug down more. I hadn't thought of the scrollbars settings until now either, I'm going to edit the issue to make that more apparent

nathanpower commented 7 years ago

FWIW, I think you could achieve much the same effect with two <Grid />s, with both wrapped in a <ScrollSync />, and 'overflow: hidden` on the left-most, single-column, grid. I have something similar (but with lists) working well now for 60k+ rows. I guess you may need the MultiGrid for other things though.

enriquecaballero commented 6 years ago

Has anyone been able to come up with a fix for this?

bvaughn commented 6 years ago

Nope. At least no PRs have been opened about it.

enriquecaballero commented 6 years ago

OK, I was able to fix it by by removing the additionalRowCount on the bottom left grid and adding this to the styling of the bottom left grid:

this._bottomLeftGridStyle = {
  left: 0,
  overflowX: "hidden",
  overflowY: enableFixedColumnScroll ? "auto" : "hidden",
  position: "absolute",
  ...styleBottomLeftGrid,
  paddingBottom: scrollbarSize()
};

scrollbarSize() coming from dom-helpers.

This seems to fix the grids from being out of sync and the offset issue.

Can someone else confirm it works for them?

bvaughn commented 6 years ago

If someone else can confirm, a PR would be great.

enriquecaballero commented 6 years ago

As soon as someone confirms, I'll work on submitting the PR.

tuchk4 commented 5 years ago

Still looking for the solution :(

Here I wrote about the idea how to reach it https://github.com/bvaughn/react-virtualized/issues/971#issuecomment-424144449

MIKL99999 commented 5 years ago

Hi, I think that I fix that bug, also I already create PR with the fix. I hope PR clear enough. So, can you take a look at it?