当背景颜色存在时，为什么“位置：粘性”边框不可见？

Question

position: 'sticky' 登陆 Chrome 56 ，但在某些情况下它使边框不可见。

考虑以下示例：

 table {
  border-collapse: collapse;
}

thead {
  position: sticky;
  top: 0;
}

th {
  background-color: #fff;
  border-right: 5px solid red;
}

 <table>
  <thead>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
    </tr>
  </thead>
</table>

在 Chrome 56.0.2924.76 中，只有最后一个 <th> 的边框是可见的，并且只有在 <th> background-color

这是 Chrome 中的错误吗？

操场

原文由 Misha Moroshko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

似乎强制回流将部分帮助：

 table {
  border-collapse: collapse;
}

thead {
  position: sticky;
  top: 0;
}

th {
  border-right: 5px solid red;
  transform:scale(0.999);
}

   <table>
    <thead>
      <tr>
        <th>First</th>
        <th>Second</th>
        <th>Third</th>
      </tr>
    </thead>
  </table>

background-clip 似乎也有效且无害：

 table {
  margin-top: 1em;
  border-collapse: collapse;
  margin-bottom: 200vh
}

thead {
  position: sticky;
  top: 0;
}

th {
  border-right: 5px solid red;
  background:white;
  background-clip: padding-box;
}

   <table>
    <thead>
      <tr>
        <th>First</th>
        <th>Second</th>
        <th>Third</th>
      </tr>
    </thead>
  </table>

原文由 G-Cyrillus 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

box-shadow: inset 0 0 0px 2px #555; 而不是 border: solid 2px #555; 会起作用。但这确实是一个错误，应该由浏览器修复。

原文由 Fla 发布，翻译遵循 CC BY-SA 4.0 许可协议