Table borders not properly rendered when td is position:relative
<p>I'm having problems with table borders not always rendering correctly when the following conditions are met:</p>

<ul>
<li>The table is contained within a div with <code>overflow-y:scroll</code></li>
<li>Borders are collapsed on the table</li>
<li> elements are styled <code>position:relative</code></li>
</ul>

<p>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.</p>

<p>I've managed a minimal case in JSFiddle (<a href="https://jsfiddle.net/5a0a4sL1/24/" rel="nofollow noreferrer">https://jsfiddle.net/5a0a4sL1/24/</a>). The code looks like this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="scroll"&gt;
  &lt;div class="wrapper"&gt;
    &lt;table&gt;
      &lt;tbody&gt;
        &lt;tr&gt;&lt;td style="height:39px;"&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td style="height:75px;"&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td style="height:111px;"&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td style="height:39px;"&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>The page looks like this when there's an issue:</p>

<p><a href="https://i.stack.imgur.com/VQg3M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VQg3M.png" alt="enter image description here"></a></p>

<p>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.</p>

<p><strong>My question is this:</strong> 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?</p>

<p><em>Edit</em>: I believe this isn't the "table borders disappear with position:relative" issue discussed <a href="https://stackoverflow.com/questions/7021085/td-positionrelative-overflows-into-the-table-border">here, for example</a>. Borders for table cells are often partially rendered, and the issue disappears if (for example) scrolling in the y direction is removed.</p>