Rand Radius + Überlauf versteckt + inneres Element (Fortschrittsbalken) macht gezackte Randartefakte

Question

Ich versuche, eine Fortschrittsleiste zu erstellen, ziemlich einfach. Ich habe eine Bar in einem Fach verschachtelt. Das Tablett hat overflow: hidden und border-radius darauf eingestellt.

Hier ist die jsFiddle das Problem demonstriert.

Wie Sie auf dem Bild sehen können, gibt es ein gezacktes Artefakt auf der linken Seite des Fortschrittsbalkens. Es scheint, dass die Anti-Aliased-Kante des übergeordneten Fortschrittsbalkens (dunkler Hintergrund) ausgeblendet wird. Das gewünschte Verhalten ist, dass das bar/fill-Element zum Anti-Aliasing des Fortschrittsbalkens verwendet wird.

Eine kurze Lösung, die ich versuchte, war absolut die innere div Positionierung, aber die Fortschrittsbalken muss in der Lage sein, von 0 bis 1% zu animieren, und das sieht ohne den overflow: hidden Clipping aus.

Ich sehe dieses Artefakt sowohl Chrome und Firefox, so dass ich nicht sofort vermuten, es ist ein Fehler in Webkit.

Ich würde auch bemerken, dass dieser Fehler auch Bootstrap's progress bars betrifft, aber wenn das Fach eine helle Farbe und der Hintergrund eine helle Farbe ist, ist das Artefakt viel schwieriger zu erkennen.

Answer 1

eine zusätzliche Wrapper Hinzufügen hilft Probleme mit 0 & 1% zu mildern:

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

EDIT: Die einzige Art, wie ich denken kann, ist, wenn Sie den Überlauf entfernt und angelegt, um einen unteren Rand-Radius um den grau-Fortschritt, der die schwarzen leicht überlappen.

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! */ 
}