Chromium table border bug(?) with gradients

Dev
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.

3 Likes
3

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