Bug del bordo della tabella Chromium(?) con gradienti

Sviluppatore
1

Saluti a tutti. Abbiamo iniziato a spostare il nostro forum dal proprietario Xenforo al Discourse open-source e, nel processo di replica della grafica del nostro vecchio forum, mi sono imbattuto in un problema CSS specifico di Chrome.
Non so se qualcun altro si sia imbattuto in questo, non sono riuscito a trovare altri argomenti sul forum a riguardo qui.

Ho provato a implementare un gradiente su tutto ciò che è una tabella, in questo caso l’elenco delle categorie e l’elenco degli argomenti.
Su Firefox sembra come dovrebbe:

Screenshot

image

ma i browser basati su Chromium sembrano renderizzare un bordo aggiuntivo:

Screenshot

image

E questo è il CSS in questione (usando l’elenco delle categorie all’interno di una categoria come esempio):

Codice 
#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 uso background-color, entrambi i browser renderizzano i <th> identicamente, cioè senza il bordo aggiuntivo sovrapposto.

Non sono riuscito a riprodurre questo problema con HTML+CSS vanilla, codepen o altri strumenti simili. Se conosci il DOM di Discourse e i selettori/regole CSS, il tuo aiuto sarebbe molto apprezzato.

2

Penso di esserci riuscito.
Ho dovuto applicare il bordo a tr > th:first-child invece che a tr. Ora entrambi i browser vengono renderizzati in modo identico.
Non ho la minima idea di quale fosse quel bug che aveva il tag tr. Potrebbe essere un caso isolato o qualcosa del genere.

Questa non è una soluzione pulita, ma andrà bene dato che visivamente è la stessa cosa.

3 Mi Piace
3

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