两个角的边界半径导致视觉故障 CSS

Question

故障：

它应该是什么样子

编辑：显然这个栏没有出现在我的例子中，所以我更新了它。 StackBlitz 上的最小示例

如果 StackBlitz 不工作，Github 回购

抱歉造成混淆，这是我的最小示例，而不是我的项目。

大约 4 秒左右后，您将看到故障。该条只会在左侧呈现一些垂直部分，然后它会出现故障。

现在，如果您进入 StackBlitz 中的 index.css/style.css 并将样式从

.innerBar {
  ...

  border-top-left-radius: .25em;
  border-bottom-left-radius: .25em;
}

到

.innerBar {
  ...

  border-radius: .25em;
}

它会正确渲染。但是，如果您查看底部的 index.css，我会在栏满时上课，因为我只想在栏满时将右侧角圆化。

我试过弄乱外部 div（条）和内部 div（内部条或滑块）上的边框半径。这就是我发现是什么原因造成的。

编辑：我尝试放大我的示例只是为了注意到这样做会删除工件。在正常缩放下重新启动条形增长后，我可以再次看到它。

它在 Firefox 上正确呈现，但在我尝试过的任何 Chrome 浏览器上都没有。我需要它在 Chrome 上工作，因为我正在制作一个 Electron 应用程序。

Answer 1

只要让外面的

.bar

做圆角和隐藏任何溢出。那么你的

.innerBar

根本不需要任何圆角！

.bar {
  border-radius: .25em;
  overflow: hidden;
}
.innerBar {
  border-radius: 0;   /* this is the default value */
}