search

petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.13k stars 299 forks source link

[BUG] Table with sticky columns have issue with border rendering on random rows #1042

Closed andrejtomas5 closed 6 months ago

andrejtomas5 commented 6 months ago

Describe the bug When using sticky columns for the table I've noticed that randomly for some rows the bottom border for td element is not shown and sometimes the row before that has a double bottom border. I checked in the DevTools and the styles seem to have been applied correctly but for some reason the border is not visible. The border reappears when I hover over the column or row.

Codesanbox Link to the codesanbox

Expected behavior Each border should be rendered for the td element and shouldn't disappear randomly when scrolling.

Screenshots image

Desktop:

Additional context I tried to solve with by using borderCollapse: 'collapse' and adding a border to the tr element but the problem persists.

petyosi commented 6 months ago

The sandbox does not work for some reason. Can this be a browser bug? If so, it's a matter of finding the right hack to force rendering.

image
andrejtomas5 commented 6 months ago

I apologize, i forgot to make the sandbox public, please take a look again.

petyosi commented 6 months ago

Yes, it works now. However, it works reliably for me, I'm testing it in Chrome on a mac, which means that this might be some sort of a platform-specific rendering glitch.

petyosi commented 6 months ago

I'm afraid that I can't reproduce the problem on my side, so closing.