Border of row is disappear when scroll down

[nrc2539]

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

Code sandbox

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

Screen.Recording.2566-11-06.at.23.10.42.mov

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

• I agree to follow this project's Code of Conduct
• 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.

[nrc2539]

I change estimateSize in useVirtualizer from 34 to 35 and border seem to display correct position but it still disappear after row 57

[nrc2539]

UPDATE : from example at #585 (comment) 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

[piecyk]

This is interesting, looks like it's connected how borders are handled in table by browser.

[okonet]

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.

[ak274]

Facing the same issue. Is there a better example with react-table where rows can have variable height?

[piecyk]

@ak274 best is to change positioning strategy, checkout this comment #640 (comment) same as @nrc2539 was suggesting

[THMKAE]

Had somewhat the same issue, we used a workaround with a box-shadow instead of a border.