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
![]()
mas os navegadores baseados em Chromium parecem renderizar uma borda extra:
Captura de tela
![]()
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.