Chromium 테이블 테두리 버그(?)와 그라디언트

개발
1

안녕하세요 여러분. 우리는 포럼을 프로프라이어티인 Xenforo에서 오픈소스인 Discourse로 이전하기 시작했고, 기존 포럼의 시각적 요소를 재현하는 과정에서 Chrome에서만 나타나는 CSS 문제를 발견했습니다.
다른 분들도 이 문제를 겪었는지 모르겠습니다. 여기에서 관련 포럼 주제도 찾을 수 없었거든요.

저는 테이블(이 경우 카테고리 목록과 주제 목록)에 그라디언트를 적용해 보았습니다.
Firefox에서는 의도한 대로 표시됩니다:

스크린샷

image

하지만 Chromium 기반 브라우저에서는 추가적인 테두리가 렌더링되는 것 같습니다:

스크린샷

image

그리고 문제의 CSS는 다음과 같습니다 (카테고리 내부의 카테고리 목록을 예시로 사용):

코드 
#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;
}

background-color를 사용하면 두 브라우저 모두 <th>를 동일한 방식으로, 즉 추가적인 겹쳐진 테두리 없이 렌더링합니다.

반바닐라 HTML+CSS, CodePen 또는 기타 유사한 도구로는 이 문제를 재현할 수 없었습니다. Discourse의 DOM과 CSS 선택자/룰셋에 대해 잘 아신다면, 도움을 주시면 감사하겠습니다.

2

어떻게 해결한 것 같아요.
tr 대신 tr > th:first-child에 경계를 적용해야 했어요. 이제 두 브라우저 모두 동일한 방식으로 렌더링됩니다.
tr 태그에 어떤 버그가 있었는지는 전혀 모르겠어요. 일회성 문제이거나 그런 것 같네요.

깔끔한 해결책은 아니지만, 시각적으로 동일하므로 이 정도면 충분할 것 같아요.