Why border is not visible with "position: sticky" when background-color exists?

Question

position: 'sticky' landed in Chrome 56, but it makes the border invisible in certain circumstances.

Consider the following example:

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>

In Chrome 56.0.2924.76, only the last <th>'s border is visible, and this is only when <th> has a background-color specified.

Is this a bug in Chrome?

Playground

Answer 1

I faced the same problem. My workaround was to use the :after pseudo element to emulate a bottom border.

th:after{   content:'';   position:absolute;   left: 0;   bottom: 0;   width:100%;   border-bottom: 1px solid rgba(0,0,0,0.12); }