Virtualization of a grid does not work correctly in scaled container

[DaDom]

When the parent container is scaled down (i.e. something like transform: scale(0.4)), the overscan does not work correctly. Rows and columns at the bottom / to the right are not rendered, I suppose because the calculation assumes they are not visible yet.

I have adjusted the example CodeSandbox for this scenario:
https://codesandbox.io/s/amazing-chandrasekhar-wivbo

You can see the issue with the grid:

Is there any recommended way how to configure useVirtual for such cases, or is this simply a bug in the calculation?

[tannerlinsley]

I'm not sure how to deal with this yet so I'll be the first to say that this is an edge case the library doesn't handle right now. We might address this in the future, pending some more investigation into the issue.

[DaDom]

Thanks, @tannerlinsley , I agree that this is certainly not something that many of us will encounter.
We will increase the overscan config in such cases for now and hope that there will be a fix for this some time in the future.

[paulshen]

For others who stumble on this, I had this same use case where I was using react-virtual inside a scaled container. You can work around it by providing your own useObserver. The issue arises because the rows keep reporting the original unscaled height whereas the container uses getBoundingClientRect, which is affected by the css transform.

The relevant lines are

• https://github.com/TanStack/react-virtual/blob/061075751c3fad630710c0f7794e587a6cf9dda0/src/useRect.js#L22
• https://github.com/reach/observe-rect/blob/4da69010382bf9b9a4cb2078afe613babab9d764/src/index.ts#L19

What you can do is create your own copy of useRect and then wrap it to scale the width and height by the scale of the container. If you do this, then the container rect will be in the same scale dimension as the row sizes again.