边界半径+溢出隐藏+内部元素（进度条）使锯齿状边缘工件

Question

我试图建立一个进度条，相当简单。我有一个嵌在托盘内的酒吧。托盘上设有overflow: hidden和border-radius。

这里有jsFiddle证明问题。

正如您在图像中看到的那样，进度条左侧有一个锯齿状的工件。显示父进度条（深色背景）的消除锯齿边缘正在流血出。所需的行为是bar / fill元素用于对进度条进行消除锯齿。

我尝试过的一个简单的解决方案是绝对定位内部div，但进度条需要能够从0到1％设置动画，并且在没有overflow: hidden剪辑的情况下看起来很容易

我看到这个神器 Chrome和Firefox 所以我不会立即怀疑它是Webkit中的错误。

我还会注意到这个错误也会影响Bootstrap's progress bars，但是当托盘是浅色并且背景是浅色时，人工制品就难以发现。

Answer 1

添加额外的包装有助于缓解0＆amp; 1％：

http://jsfiddle.net/p197qfcj/11/

<强> HTML

<div class="outer-tray">
    <div class="tray">
        <div class="fill"></div>
    </div>
</div>

<强> CSS

body {
    background: #ccc;
}
.tray {
  /* overflow: hidden; */
  height: 20px;
  background: #000;
  border-radius: 50px;
  height: 30px;
  width: 100%;
  border: none solid transparent;
  background-color: black;
}
.fill {
  background: #fff;
  width: 10%;
  border-radius: 100px;
  left: -1px;
  position: relative;
  float: left;
  box-sizing: border-box;
  border: 1px solid white;
  top: -1px;
  height: 32px;
}
.outer-tray {
    overflow: hidden;
  border-radius: 100px;
  overflow: hidden;
  display: block;
}

Answer 2

修改 我能想到的唯一方法是，如果你移除了溢出并在灰色进度周围应用了较低的边界半径，这将略微与黑色重叠。

http://jsfiddle.net/p197qfcj/7/

.tray {
    height: 20px;
    background: #000;
    border-radius: 100px;
    height:30px;
    width:90%;
}
.fill {
    background:#eee;
    width:10%;
    height:100%;
    border-radius: 12px; /* still occurs without this! */
}