Drag and Drop sticky columns sometimes off by 1px when dropped (Chrome)

[okbytes]

I have an implementation of Drag-n-Drop sticky columns working (mostly) as desired in targeted browsers (Safari, Chrome), except in Chrome it will occasionally misalign a dropped item by 1px.

The problem is no doubt exasperated by the sticky table header and box shadow hacks to keep the borders as a user scrolls. Ironically, it works fine in Safari, which usually causes me trouble. I've tried various approaches with using an ::after to add the th borders, but the problem persists.

I'm using setColumnOrder() from useColumnOrder plugin to set the new column order on the onDrop event.

I suspect it has something to do with Drag n Drop API and maybe React Table itself? Any leads/ideas are welcome as this has stumped me.

table-woes.mp4