边界半径+溢出隐藏+内部元素(进度条)使锯齿状边缘伪影

Question

我正在尝试建立一个进度条,相当简单.我有一个嵌在托盘内的酒吧.该盘已overflow: hidden和border-radius设置就可以了.

这是证明问题的jsFiddle.

正如您在图像中看到的那样,进度条左侧有一个锯齿状的神器.看起来父进度条(深色背景)的抗锯齿边缘正在流血.期望的行为是条/填充元素用于对进度条进行抗锯齿处理.

我尝试的一个简单的解决方案是绝对定位内部div,但进度条需要能够从0到1%的动画,并且没有overflow: hidden裁剪就能看到.

我在Chrome和Firefox上都看到了这个神器,所以我不会立即怀疑它是Webkit中的一个错误.

我还会注意到这个错误也会影响Bootstrap的进度条,但是当托盘是浅色并且背景是浅色时,该工件更难以发现.

Answer 1

添加额外的包装器有助于缓解 0 和 1% 的问题：

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

超文本标记语言

<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;
}