Promień obramowania + przepełnienie ukryty + element wewnętrzny (pasek postępu) sprawia, że ​​postrzępione krawędzie artefaktów

Question

Próbuję zbudować pasek postępu, dość prosty. Mam pręt zagnieżdżony w tacy. Taca ma na sobie zestaw overflow: hidden i border-radius.

Oto jsFiddle wykazania problem.

Jak widać na obrazku, po lewej stronie paska postępu znajduje się postrzępiony artefakt . Wygląda na to, że wygładzana krawędź paska postępu rodzica (ciemne tło) jest wykrwawiona. Pożądane zachowanie polega na tym, że element prętowy/wypełniający służy do wygładzania paska postępu.

Krótka rozwiązanie Próbowałem absolutnie pozycjonowania wewnętrznej div, ale pasek postępu musi być w stanie ożywić od 0 do 1%, i że wygląda się bez overflow: hidden przycinania.

Widzę ten artefakt zarówno Chrome jak i Firefox, więc nie od razu podejrzewam, że to błąd w Webkit.

Chciałbym również zauważyć, że ten błąd dotyczy również Bootstrap's progress bars, ale gdy taca jest jasna, a tło ma jasny kolor, artefakt jest znacznie trudniejszy do wykrycia.

Answer 1

Dodanie dodatkowego opakowania pomaga złagodzić swoje problemy z 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; 
} 

Answer 2

EDIT: Jedynym sposobem mogę pomyśleć, to jeśli usunięte przepełnienie i stosować niższą border-radius wokół szaro-Progress które nachodzą na siebie czarną.

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