TanStack
Border of row is disappear when scroll down
Describe the bug
When I scroll down in table around 20 rows is looking fine, but after that border of row will be display wrong position and then it disappear.
Your minimal, reproducible example
Steps to reproduce
I using table example from document
and modify style of <table> with style={{ borderCollapse: "collapse" }}
and style of <tr> in <tbody> by adding borderTop: "1px solid #ff0000"
Expected behavior
Border of each row should be visible and display correctly position
How often does this bug happen?
Every time
Screenshots or Videos
https://github.com/TanStack/virtual/assets/37901109/40926069-52ba-4eac-b246-2bd333523b39
Platform
OS: macOS Browser: Google chrome Version 119.0.6045.105
tanstack-virtual version
"3.0.0-beta.68"
TypeScript version
No response
Additional context
No response
Terms & Code of Conduct
- [X] I agree to follow this project's Code of Conduct
- [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
I change estimateSize in useVirtualizer from 34 to 35 and border seem to display correct position but it still disappear after row 57
UPDATE : from example at https://github.com/TanStack/virtual/issues/585#issuecomment-1716173260 can solve this problem
by adding calculated height <tr> before and after section that rendering virtual row
maybe translateY in table example cause problem in this case
This is interesting, looks like it's connected how borders are handled in table by browser.
I ran into similar issue with the border-collapse: collapse and not sure what's causing it but seems that getBoundingBox returns wrong values somehow.
Facing the same issue. Is there a better example with react-table where rows can have variable height?
@ak274 best is to change positioning strategy, checkout this comment https://github.com/TanStack/virtual/issues/640#issuecomment-1885029911 same as @nrc2539 was suggesting
Had somewhat the same issue, we used a workaround with a box-shadow instead of a border.
