Chromium: ¿bug en borde de tabla con degradados?

Desarrollador
1

Saludos, gente. Hemos comenzado a migrar nuestro foro del software propietario XenForo a Discourse de código abierto, y en el proceso de replicar la apariencia de nuestro antiguo foro me encontré con un problema de CSS específico de Chrome.
No sé si a alguien más le ha pasado esto, no pude encontrar ningún otro tema en el foro al respecto aquí.

Intenté implementar un degradado en todo lo que es una tabla, en este caso la lista de categorías y la lista de temas.
En Firefox se ve como debería:

Captura de pantalla

image

pero los navegadores basados en Chromium parecen renderizar un borde adicional:

Captura de pantalla

image

Y este es el CSS en cuestión (usando la lista de categorías dentro de una categoría como ejemplo):

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

Si uso background-color, ambos navegadores renderizan el <th> de forma idéntica, es decir, sin el borde adicional superpuesto.

No pude reproducir este problema con HTML+CSS básico, codepen o cualquier otra herramienta similar. Si conoces bien el DOM de Discourse y los selectores/conjuntos de reglas CSS, tu ayuda sería muy apreciada.

2

Creo que logré resolverlo.
Tuve que aplicar el borde a tr > th:first-child en lugar de tr. Ahora ambos navegadores se renderizan de forma idéntica.
No tengo ni idea de qué era ese error que tenía la etiqueta tr. Podría ser algo puntual o algo así.

Esta no es una solución limpia, pero servirá ya que visualmente es lo mismo.

3 Me gusta
3

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