Horizontal scrolling looks weird with row selection + column virtualization

[paulmwk]

material-react-table version

since v2.9.0

react & react-dom versions

18.2.0

Describe the bug and the steps to reproduce it

Before v2.9.0, horizontal scrolling looks a lot better. Since 2.9.0, another colour seems to appear while scrolling horizontally. Scrolling work fine without column virtualization.

Minimal, Reproducible Example - (Optional, but Recommended)

https://stackblitz.com/github/KevinVandy/material-react-table/tree/v2/apps/material-react-table-docs/examples/enable-column-virtualization/sandbox?file=src/TS.tsx

enable row selection enable column virtualization set all column size to 150 to better visualize it, same issue occurs with dynamic size.

Then select all rows and scroll horizontally.

Screenshots or Videos (Optional)

https://github.com/KevinVandy/material-react-table/assets/106643416/a4dbb935-db49-4c7c-b41f-9a8a4f156166

https://github.com/KevinVandy/material-react-table/assets/106643416/bcea02bb-2599-4d61-bf29-550ff18ef793

Do you intend to try to help solve this bug with your own PR?

None

Terms

• [X] I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[KevinVandy]

We're using new :before and :after styles on cells that solved row opacity bugs with pinning+selection features. That's probably responsible, assuming all of these rows are pinned. If this is seen as a serious issue, we can look into it more. Wondering if this is browser specific?

[paulmwk]

Test it in Chrome Version 121.0.6167.160 and Safari Version 17.2.1. The issue does not exist in Safari.