border radius + overflow hidden + inner element (progress bar) makes jagged edge artifacts

Question

I'm attempting to build a progress bar, fairly simple. I have a bar nested inside a tray. The tray has overflow: hidden and border-radius set on it.

Here's the jsFiddle demonstrating the problem.

As you can see in the image, there is a jagged artifact on the left side of the progress bar. It appears the anti-aliased edge of the parent progress bar (dark background) is bleeding out. The desired behavior is that the bar/fill element is used for anti-aliasing the progress bar.

A brief solution I tried was absolutely positioning the inner div, but the progress bar needs to be able to animate from 0 to 1%, and that looks off without the overflow: hidden clipping.

I see this artifact both Chrome and Firefox so I don't immediately suspect it's a bug in Webkit.

I would also note this bug also affects Bootstrap's progress bars, but when the tray is a light color and the background is a light color, the artifact is much harder to spot.

Answer 1

Adding an extra wrapper helps mitigate your issues with 0 & 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;
}