React-virtualized: MultiGrid alignment when scrolled to far-right or bottom

[andrewdavey]

I was trying out the MultiGrid demo at https://bvaughn.github.io/react-virtualized/#/components/MultiGrid and noticed a problem when scrolling to the far-right or bottom.

The columns in the top grid become misaligned with the main grid body. (Same for the rows when scrolling to bottom.)

I assume this is due to the presence of the scrollbar in one div causing an offset?

Tested in Chrome 55 and Firefox 50

[natew]

I noticed this as well, with a pretty wide table (10k items by 70px), it actually seems to distort more or less based on scroll:

Direction seems to affect it as well:

https://v.usetapes.com/Qg5Mlwx5Dr

[jeffvan576]

Running into the same issue using ScrollSync

[bvaughn]

Makes sense; MultiGrid uses ScrollSync internally, unfortunately.

[kachkaev]

Has anyone been able to find a temporary workaround for this by a chance? It'd be great if you shared.

[jeffvan576]

It's not pretty but it's a workaround:

https://gist.github.com/jeffvan576/dd6ad36869fff28be9043d9e28307135

Then feed in adjustedMeasurement.height and adjustedMeasurement.width instead of the AutoSizer width and height. Seems to be working here so far. Again, not pretty but a temporary patch.

[abhishiv]

Seems because of scrollbars. On chrome I can hide the scrollbars using this css

.grid-parent *::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

But for ff, I have to use @jeffvan576 solution. Would be nice to have it fixed in react-virtualized itself.

[bvaughn]

Fixed this, although I'm not _super_ thrilled with the fix. Check out 9.2.1 ...

[neti123]

Still not fixed. To see it, put the cell border to black, not grey. With grey, it's hard to see. Scroll both with the scroll bar thumb and also with scroll bar end and start thumb. It's still not lined up perfectly, although very close.

[casvil]

still not fixed

[SaliaLashgari]

Just to confirm, this still is not fixed and does not work...