-webkit-clip-pfad mysteriöse zeile in chrom wenn scrollbar vorhanden

Question

Wenn Sie in Google Chrome -webkit-clip-path verwenden, um einen gewinkelten Rahmeneffekt zu erstellen, ist ein mysteriöser Splitter des Hintergrundelements mit gleicher Breite nur sichtbar, wenn die Bildlaufleiste vorhanden ist.

Mit Scrollbar:

ohne Scrollbalken:

ich nichts in den berechneten Arten sehen, die dies verursachen würde. Gibt es eine Möglichkeit, das gewünschte Aussehen (ohne die Linie) konsequent zu erreichen? Vorzugsweise ohne irgendein pseudo/absolut positioniertes Element zu verwenden, um es zu verstecken.

Der Kodex (http://codepen.io/anon/pen/EKmYgP):

.container { 
 
    background: #ff0000; 
 
    width: 400px; 
 
    margin: 0 auto; 
 
} 
 
.block { 
 
    background: #fff; 
 
    height: 400px; 
 
    -webkit-clip-path: polygon(0px 20%, 100% 0px, 100% 100%, 0px 100%) 
 
}

<div class="container"> 
 
    <div class="block"></div> 
 
</div>

Answer 1

Sie diese Zeile mit dem folgenden Code-Schnipsel verstecken.

.container { 
 
    background: #ff0000; 
 
    width: 400px; 
 
    margin: 0 auto; 
 
} 
 
.block { 
 
    background: #fff; 
 
    height: 400px; 
 
    -webkit-clip-path: polygon(0px 20%, calc(100% + 1px) 0px, calc(100% + 1px) 100%, 0px 100%); 
 
    
 
    /** or this... 
 
    -webkit-clip-path: polygon(0px 20%, 101% 0px, 101% 100%, 0px 100%); 
 
    */ 
 
}

<div class="container"> 
 
    <div class="block"></div> 
 
</div>

Wenn Sie die margin:0 auto; von .container entfernen Sie die Zeile zu verschwindet (ohne Änderungen auf -webkit-clip-path)!

Erläuterung: Der auto Wert auf margin diese rote Linie erstellen, weil der rechte Rand eine Float-Zahl wie 0.5px ist. Google Chrome kann jedoch keine halbe Zeile zeichnen. Also wird der Rand auf den nächsten, nicht schwebenden Wert 0.0px abgerundet und der .container wird gestreckt. Andere Browser runden bis 1.0px und die Zeile wird nicht angezeigt.

Die Außenseite des Behälters wie folgt aussieht:

.container { 
 
    background: #ff0000; 
 
    width: 400px; 
 
    margin: 0 auto; 
 
} 
 
.block { 
 
    background: #fff; 
 
    height: 400px; 
 
    -webkit-clip-path: polygon(0px 20px, 100px 0px, 100px 100px, 0px 100px); 
 
}

<div class="container"> 
 
    <div class="block"></div> 
 
</div>

So 1px des roten Bereich, den Sie auf der rechten Seite sehen!