Bug de bordure de tableau Chromium(?) avec dégradés

Dev
1

Salutations à tous. Nous avons commencé à migrer notre forum du logiciel propriétaire XenForo vers le logiciel open-source Discourse, et en cours de réplication des visuels de notre ancien forum, j’ai rencontré un problème CSS spécifique à Chrome.
Je ne sais pas si d’autres ont rencontré cela, je n’ai trouvé aucun autre sujet de forum à ce sujet ici.

J’ai essayé d’implémenter un dégradé sur tout ce qui est un tableau, dans ce cas la liste des catégories et la liste des sujets.
Sur Firefox, cela ressemble à ce que cela devrait être :

Capture d'écran

image

mais les navigateurs basés sur Chromium semblent rendre une bordure supplémentaire :

Capture d'écran

image

Et voici le CSS en question (en utilisant la liste des catégories dans une catégorie comme exemple) :

Code 
#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;
}

Si j’utilise background-color, les deux navigateurs rendent le `<th`` identiquement, c’est-à-dire sans la bordure superposée supplémentaire.

Je n’ai pas pu reproduire ce problème avec du HTML+CSS vanilla, Codepen ou tout autre outil similaire. Si vous connaissez bien le DOM de Discourse et les sélecteurs/règles CSS, votre aide serait grandement appréciée.

2

Je pense que j’ai réussi à trouver une solution.
J’ai dû appliquer la bordure à tr \u003e th:first-child au lieu de tr. Maintenant, les deux navigateurs rendent de manière identique.
Je n’ai aucune idée de ce qu’était ce bug avec la balise tr. C’est peut-être un cas isolé ou autre chose.

Ce n’est pas une solution propre, mais cela fera l’affaire car visuellement, c’est la même chose.

3 « J'aime »
3

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