Randradius + Überlauf ausgeblendet + inneres Element (Fortschrittsbalken) macht gezackte Randartefakte

9

Ich versuche, einen Fortschrittsbalken zu erstellen, ziemlich einfach. Ich habe eine Bar in einem Fach verschachtelt. Für das Fach ist overflow: hidden und border-radius festgelegt.

Hier ist das jsFiddle , das das Problem demonstriert.

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

Eine kurze Lösung, die ich ausprobiert habe, war das absolute Positionieren des inneren Divs, aber der Fortschrittsbalken muss in der Lage sein, von 0 bis 1% zu animieren und das ohne overflow: hidden clipping.

Ich sehe dieses Artefakt Chrome und Firefox , so dass ich nicht sofort einen Fehler in Webkit vermute.

Ich würde auch bemerken, dass dieser Fehler auch Auswirkungen auf Bootstrap-Fortschrittsbalken hat, aber wenn das Tablett eine helle Farbe hat und der Hintergrund ist eine helle Farbe, das Artefakt ist viel schwieriger zu erkennen.

    
Andy Ray 19.05.2015, 23:39
quelle

2 Antworten

4

Durch das Hinzufügen eines zusätzlichen Wrappers können Sie Ihre Probleme mit 0 & amp; 1%:

Ссылка

HTML

%Vor%

CSS

%Vor%     
karns 19.05.2015, 23:53
quelle
0

BEARBEITEN: Der einzige Weg, an den ich denken kann, ist, wenn Sie den Überlauf entfernen und einen niedrigeren Umrandungsradius um den Grauverlauf anwenden, der das Schwarz leicht überlagert.

Ссылка

%Vor%     
chdltest 19.05.2015 23:49
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Behandlung mehrerer Fehler in go