Bug(?) na borda da tabela do Chromium com gradientes

Saudações pessoal. Começamos a migrar nosso fórum do XenForo proprietário para o Discourse de código aberto e, no processo de replicar os visuais do nosso antigo fórum, me deparei com um problema de CSS específico do Chrome.
Não sei se mais alguém se deparou com isso, não consegui encontrar nenhum outro tópico no fórum sobre isso aqui.

Tentei implementar um gradiente em tudo que é uma tabela, neste caso, a lista de categorias e a lista de tópicos.
No Firefox, parece como deveria:

Captura de tela

image

mas os navegadores baseados em Chromium parecem renderizar uma borda extra:

Captura de tela

image

E este é o CSS em questão (usando a lista de categorias dentro de uma categoria como exemplo):

Código
#header-list-area .category-list > thead > tr {
  border-color: #a3a3a3;
  background-image: linear-gradient(to right, #a3a3a3, #424242);
}
.category-list > thead > tr {
  border-width: 0px;
  border-left-width: 6px;
  border-style: solid;
}

Se eu usar background-color, ambos os navegadores renderizam o <th idêntico, ou seja, sem a borda extra sobreposta.

Não consegui reproduzir este problema com HTML+CSS vanilla, codepen ou outras ferramentas semelhantes. Se você entende do DOM e dos seletores/regras CSS do Discourse, sua ajuda seria muito apreciada.

Acho que consegui resolver.\nEu tive que aplicar a borda a tr \u003e th:first-child em vez de tr. Agora ambos os navegadores renderizam de forma idêntica.\nNão tenho a menor ideia do que era aquele bug que a tag tr tinha. Pode ter sido algo pontual ou algo assim.\n\nEsta não é uma solução limpa, mas serve, pois visualmente é o mesmo.

3 curtidas

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.