chrome 中旋转边框的奇怪工件

Question

所以我有一个基本上是半圆但稍微旋转的边框。它在 firefox 中看起来不错，但在 chrome 中它的边框部分有一条细线，应该是透明的。如果元素 未 旋转，则它在 chrome 中看起来 良好并且没有出现工件。有人知道我在这里缺少什么吗？

body {
  background-color: lightblue;
}

#line {
  border: 7px solid;
  border-top-left-radius: 100% 200%;
  border-top-right-radius: 100% 200%;
  width: 300px;
  height: 150px;
  border-color: #000 #000 rgba(0, 0, 0, 0) #000;
  margin: 100px;
  -webkit-transform: rotate(20deg)
}

<div id="line"></div>

然后是它的样子：in Chrome, in firefox

Answer 1

尝试将此 属性 添加到 #line:

-webkit-backface-visibility: hidden;

这并不是这个 属性 的通常用途，但它似乎有助于修复 Chrome 上其他奇怪的变换相关的渲染问题，例如锯齿状边缘。

来源：Whosebug answer