Chromium table border bug(?) with gradients

Development

AI-generated summary

polyzium reported a Chrome-specific CSS rendering issue when applying gradients to table elements (e.g., category/topic lists) during a migration from Xenforo to Discourse. While Firefox renders gradients correctly, Chromium-based browsers display an unintended extra border. The issue occurs when applying border-style: solid and background-image: linear-gradient to tr elements. Using background-color instead avoids the problem. Attempts to reproduce the bug in vanilla HTML/CSS or CodePen failed. polyzium later found a workaround: applying the border to tr > th:first-child instead of tr, which resolves the visual discrepancy across browsers. The root cause remains unclear, but the workaround achieves consistent rendering. The issue appears specific to Discourse’s DOM or CSS structure, and no prior forum topics on this bug were found.

1

Greetings folks. We have started moving our forum from the proprietary Xenforo to the open-source Discourse, and in the process of replicating visuals of our old forum I ran across a Chrome-specific CSS issue.
I don’t know if anybody else ran across this, I couldn’t find any other forum topics about it here.

I tried implementing gradient on anything that is a table, in this case category list and topic list.
On Firefox it looks like it should:

Screenshot

image

but Chromium based browsers seem to render an extra border:

Screenshot

image

And this is the CSS in question (using category list inside a category as an example):

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

If I use background-color, both browsers render the <th> identically, that is without the extra layered border.

I could not reproduce this issue with vanilla HTML+CSS, codepen or any other similar tools. If you know your way around Discourse’s DOM and CSS selectors/rulesets, your help would be gladly appreciated.

2

I think I managed to figure it out.
I had to apply the border to tr > th:first-child instead of tr. Now both browsers render identically.
I have zero clue what was that bug that the tr tag had. Might be a one off or something.

This isn’t a clean solution, but that’ll do as it is visually the same.