CSS - Grenze, die noch keine Grenze zeigt

Ich stoße auf ein seltsames Grenzproblem. Ich habe 2 Kreisdiagramme, die statische Höhe und Breite sind. Jeder Kreis wird durch Zeichnen von Halbkreisen (mit Rahmen und Umrandungsradius) und Drehen von .spinner zum "Füllen" des Kreises erstellt.CSS - Grenze, die noch keine Grenze zeigt

Mein Problem ist, dass eine ungerade dünne Grenze zeigt auf .spinner bis sogar mit border-right: keine erklärt. Ist schon mal jemand darauf gestoßen? oder wissen, was es verursacht?

Border on border-right:none

HTML

.chart__wrapper { 
 
    position: relative; 
 
    height: 200px; 
 
    width: 200px; 
 
    cursor: pointer; 
 
} 
 

 
.wrapper { 
 
    position: absolute; 
 
    background: transparent; 
 
    z-index: 11; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
} 
 

 
.wrapper .pie { 
 
    width: 50%; 
 
    height: 100%; 
 
    transform-origin: 100% 50%; 
 
    position: absolute; 
 
    background: transparent; 
 
    border: 15px solid #0071BB; 
 
} 
 

 
.wrapper .spinner { 
 
    border-top-left-radius: 200px; 
 
    border-top-right-radius: 0px; 
 
    border-bottom-right-radius: 0px; 
 
    border-bottom-left-radius: 200px; 
 
    z-index: 200; 
 
    border-right: none; 
 
} 
 

 
.wrapper .filler { 
 
    border-top-left-radius: 0px; 
 
    border-top-right-radius: 200px; 
 
    border-bottom-right-radius: 200px; 
 
    border-bottom-left-radius: 0px; 
 
    left: 50%; 
 
    z-index: 100; 
 
    border-left: none; 
 
} 
 

 
.wrapper .mask { 
 
    width: 50%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background: #FFFFFF; 
 
    z-index: 300; 
 
} 
 

 
.wrapper, 
 
.wrapper * { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.sub__wrapper { 
 
    position: absolute; 
 
    background: #FFFFFF; 
 
    background: transparent; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    z-index: 10; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 50%; 
 
} 
 

 
.sub__wrapper .pie { 
 
    width: 50%; 
 
    height: 100%; 
 
    transform-origin: 100% 50%; 
 
    position: absolute; 
 
    background: #FFFFFF; 
 
    background: transparent; 
 
    border: 15px solid #009CDD; 
 
} 
 

 
.sub__wrapper .spinner { 
 
    border-top-left-radius: 150px; 
 
    border-top-right-radius: 0px; 
 
    border-bottom-right-radius: 0px; 
 
    border-bottom-left-radius: 150px; 
 
    z-index: 10; 
 
    border-right: none; 
 
} 
 

 
.sub__wrapper .filler { 
 
    border-top-left-radius: 0px; 
 
    border-top-right-radius: 150px; 
 
    border-bottom-right-radius: 150px; 
 
    border-bottom-left-radius: 0px; 
 
    left: 50%; 
 
    z-index: 9; 
 
    border-left: none; 
 
} 
 

 
.sub__wrapper .mask { 
 
    width: 50%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background: #FFFFFF; 
 
    z-index: 12; 
 
} 
 

 
.value { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    z-index: 500; 
 
    transform: translate(-50%, -50%); 
 
    font-size: 36px; 
 
    text-align: center; 
 
} 
 

 
.value .progress__label { 
 
    font-size: 16px; 
 
} 
 

 
.sub__wrapper, 
 
.sub__wrapper * { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.sub__wrapper:hover .spinner, 
 
.sub__wrapper:hover .filler, 
 
.sub__wrapper:hover .mask { 
 
    animation-play-state: running; 
 
}

<div class="chart__wrapper"> 
 
    <div class="wrapper"> 
 
    <div> 
 
     <div class="spinner pie" style="transform: rotate(345deg);"></div> 
 
     <div class="filler pie" style="opacity: 1;"></div> 
 
     <div class="mask" style="opacity: 0;"></div> 
 
    </div> 
 
    </div> 
 
    <div class="sub__wrapper"> 
 
    <div> 
 
     <div class="spinner pie" style="transform: rotate(200deg);"></div> 
 
     <div class="filler pie" style="opacity: 1;"></div> 
 
     <div class="mask" style="opacity: 0;"></div> 
 
    </div> 
 
    </div> 
 
</div>

JSFiddle: https://jsfiddle.net/q0wf7hxm/3/

Quelle

2017-10-24 bymario

haben Sie Grenze versucht: 0px? wie der Grenzradius die Grenze überschreiten kann: keine? – MarkHughes88

@ MarkHughes88 Ich habe versucht, Grenze: 0px, die alle Grenzen entfernt haben, aber ich verstecke nur eine Grenze Seite, speziell Rand rechts. Rand-rechts setzen: 0px hatte den gleichen Effekt. Ich habe den Verdacht, dass border-radius zu diesem Thema gehört. – bymario

Ich löste mein Problem mit der Antwort und gab eine Randfarbe #FFFFFF auf der Seite Ich bin: keine an. https://codepen.io/asianmario/pen/KXjZzx – bymario

Es ist becuase Ihrer CSS-Transformationen.

Zu diesen Grenzen (in Chrome) loszuwerden Sie -webkit-backface-visibility mit einem Wert von versteckten hinzufügen. Dies wird sie glätten.

-webkit-backface-visibility: hidden;

Hier ist Ihre JSFiddle aktualisiert

Quelle

2017-10-24 12:43:23 Boratzan

das ist mein Problem, außer IE11 auf alle Browsern festgelegt, auch mit einer -ms-Backface-Sichtbarkeit: versteckt. Sie würden nicht zufällig einen IE11-Fix haben? Es scheint, dass IE die Hintergrund-Sichtbarkeit anders implementiert, aber unterstützt wird. https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility – bymario

Arbeiten groß hier in IE11 – Boratzan

Oh wirklich !? Vielleicht muss ich den IE erneut herunterladen oder einen anderen Computer ausprobieren. – bymario

Versuchen -webkit-backface-visibility: hidden;

.chart__wrapper { 
 
    position: relative; 
 
    height: 200px; 
 
    width: 200px; 
 
    cursor: pointer; 
 
} 
 

 
.wrapper { 
 
    position: absolute; 
 
    background: transparent; 
 
    z-index: 11; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
} 
 

 
.wrapper .pie { 
 
    width: 50%; 
 
    height: 100%; 
 
    transform-origin: 100% 50%; 
 
    position: absolute; 
 
    background: transparent; 
 
    border: 15px solid #0071BB; 
 
} 
 

 
.wrapper .spinner { 
 
    border-top-left-radius: 200px; 
 
    border-top-right-radius: 0px; 
 
    border-bottom-right-radius: 0px; 
 
    border-bottom-left-radius: 200px; 
 
    z-index: 200; 
 
    border-right: none; 
 
    -webkit-backface-visibility: hidden; 
 
} 
 

 
.wrapper .filler { 
 
    border-top-left-radius: 0px; 
 
    border-top-right-radius: 200px; 
 
    border-bottom-right-radius: 200px; 
 
    border-bottom-left-radius: 0px; 
 
    left: 50%; 
 
    z-index: 100; 
 
    border-left: none; 
 
    -webkit-backface-visibility: hidden; 
 
} 
 

 
.wrapper .mask { 
 
    width: 50%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background: #FFFFFF; 
 
    z-index: 300; 
 
} 
 

 
.wrapper, 
 
.wrapper * { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.sub__wrapper { 
 
    position: absolute; 
 
    background: #FFFFFF; 
 
    background: transparent; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    z-index: 10; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 50%; 
 
} 
 

 
.sub__wrapper .pie { 
 
    width: 50%; 
 
    height: 100%; 
 
    transform-origin: 100% 50%; 
 
    position: absolute; 
 
    background: #FFFFFF; 
 
    background: transparent; 
 
    border: 15px solid #009CDD; 
 
} 
 

 
.sub__wrapper .spinner { 
 
    border-top-left-radius: 150px; 
 
    border-top-right-radius: 0px; 
 
    border-bottom-right-radius: 0px; 
 
    border-bottom-left-radius: 150px; 
 
    z-index: 10; 
 
    border-right: none; 
 
    -webkit-backface-visibility: hidden; 
 
} 
 

 
.sub__wrapper .filler { 
 
    border-top-left-radius: 0px; 
 
    border-top-right-radius: 150px; 
 
    border-bottom-right-radius: 150px; 
 
    border-bottom-left-radius: 0px; 
 
    left: 50%; 
 
    z-index: 9; 
 
    border-left: none; 
 
} 
 

 
.sub__wrapper .mask { 
 
    width: 50%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background: #FFFFFF; 
 
    z-index: 12; 
 
} 
 

 
.value { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    z-index: 500; 
 
    transform: translate(-50%, -50%); 
 
    font-size: 36px; 
 
    text-align: center; 
 
} 
 

 
.value .progress__label { 
 
    font-size: 16px; 
 
} 
 

 
.sub__wrapper, 
 
.sub__wrapper * { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.sub__wrapper:hover .spinner, 
 
.sub__wrapper:hover .filler, 
 
.sub__wrapper:hover .mask { 
 
    animation-play-state: running; 
 
}

<div class="chart__wrapper"> 
 
    <div class="wrapper"> 
 
    <div> 
 
     <div class="spinner pie" style="transform: rotate(345deg);"></div> 
 
     <div class="filler pie" style="opacity: 1;"></div> 
 
     <div class="mask" style="opacity: 0;"></div> 
 
    </div> 
 
    </div> 
 
    <div class="sub__wrapper"> 
 
    <div> 
 
     <div class="spinner pie" style="transform: rotate(200deg);"></div> 
 
     <div class="filler pie" style="opacity: 1;"></div> 
 
     <div class="mask" style="opacity: 0;"></div> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-10-24 12:45:30 codesayan

Ohhh ... Antworten bereits gebucht ... @Boratzan :) – codesayan

-1

eine andere Lösung oder besser sagen tricktransform: perspective(0px) rotate(200deg); ist.

JSFiddle

Quelle

2017-10-24 12:49:41 Pedram

Backface-Sichtbarkeit kann auch ohne -webkit verwendet werden, sowieso das Problem nicht auf den anderen Browsern und deren beide derselben in Bezug auf Cross-Browser-Kompatibilität auftritt – Boratzan

CSS - Grenze, die noch keine Grenze zeigt

Antwort

Verwandte Themen