Почему граница не видна с «позицией: липкой», когда существует фоновый цвет?

Question

position: 'sticky' landed in 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> «s граница видна, и это только тогда, когда <th> имеет background-color указанный.

Это ошибка в Chrome?

Playground

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>

Answer 2

У меня была та же проблема. Моим обходным путем было использование псевдоэлемента :after для эмуляции нижней границы.

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