title: Why border is not visible with "position: sticky" when background-color exists?
body: <p><a href="https://developers.google.com/web/updates/2016/12/position-sticky" rel="noreferrer"><code>position: 'sticky'</code> landed in Chrome 56</a>, but it makes the border invisible in certain circumstances.</p>
  
  <p>Consider the following example:</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>table {
    border-collapse: collapse;
  }
  
  thead {
    position: sticky;
    top: 0;
  }
  
  th {
    background-color: #fff;
    border-right: 5px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;First&lt;/th&gt;
        &lt;th&gt;Second&lt;/th&gt;
        &lt;th&gt;Third&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In Chrome 56.0.2924.76, only the last <code>&lt;th&gt;</code>'s border is visible, and this is only when <code>&lt;th&gt;</code> has a <code>background-color</code> specified.</p>
  
  <p>Is this a bug in Chrome?</p>
  
  <p><a href="http://jsbin.com/fumolopicu/1/edit?html,css,output" rel="noreferrer">Playground</a></p>