Table borders not properly rendered when td is position:relative - html

Question

I'm having problems with table borders not always rendering correctly when the following conditions are met:
The table is contained within a div with overflow-y:scroll
Borders are collapsed on the table
elements are styled position:relative
As near as I can tell, this is occurring only on Chrome (Version 54.0.2840.98 on Mac OS 10.11.6). I've tested on Safari and Firefox with no issues.
I've managed a minimal case in JSFiddle (https://jsfiddle.net/5a0a4sL1/24/). The code looks like this:
.scroll {
background-color:white;
overflow-y: scroll;
width: 300px;
height: 200px;
}
.wrapper {
height: auto;
width: 280px;
padding: 10px;
margin: 0px;
}
table {
width:90%;
margin:0px 5%;
border-collapse:collapse;
}
td {
position:relative;
border:1px solid black;
}
<div class="scroll">
<div class="wrapper">
<table>
<tbody>
<tr><td style="height:39px;"></td></tr>
<tr><td style="height:75px;"></td></tr>
<tr><td style="height:111px;"></td></tr>
<tr><td style="height:39px;"></td></tr>
</tbody>
</table>
</div>
</div>
The page looks like this when there's an issue:
Here the borders for the bottom row-and-a-bit of the table are failing to render, though table contents would show if there were any. The presence and severity of the issue depend on the size of the Chrome window, which make me think this is a bug in the browser.
My question is this: Is there anything in the code that looks like I'm obviously abusing the browser? Any tweaks that might accomplish the same task (the position:relative is required for the placement of resizing handles) without making Chrome angry? Or is this just a clear browser bug?
Edit: I believe this isn't the "table borders disappear with position:relative" issue discussed here, for example. Borders for table cells are often partially rendered, and the issue disappears if (for example) scrolling in the y direction is removed.

Answer 1

I replicated the problem. The rendering is different in each browser. It could be a browser bug.
A simple workaround to get it to work perfectly in all browsers would be to add <div> inside each td and style them with position: relative. And if you want the div to take same height as the td, then also give them height: 100%.
Here's a demo.
Off-Topic Note (kind of relavant to the cause of the problem):
When you give padding 10px to an element with width 300px, the actual width becomes 320px. And if you give it border 1px, the actual width will be 322px (border left 1px and border right 1px). To get an actual 300px with padding 10px and border 1px, give the element this attribute: box-sizing: border-box;. Same concept applies for "height".
For example, when you gave an element height 39px and border 1px, the actual height is 41px (1px top border + 1px bottom border). If you add box-sizing: border-box to the td, then the height would be 39px.