Wie entfernen Sie die weißen Kanten, die zwischen zwei verzerrten Elementen erscheinen?

Ich sehe eine weiße Linie zwischen verzerrten HTML-divs im Chrome-Browser. Unten ist ein Screenshot der Ausgabe:Wie entfernen Sie die weißen Kanten, die zwischen zwei verzerrten Elementen erscheinen?

Hier ist der Code:

.abc { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 
    width: 200px; 
    height: 200px; 
    background: green; 
    position: absolute; 
    left:0px; 
    transform: skewX(-10deg); 
    transform-origin: 0% 100%; 
} 

.def { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 
    width: 200px; 
    height: 200px; 
    background: green; 
    position: absolute; 
    left:200px; 
    transform: skewX(-10deg); 
    transform-origin: 0% 100%; 

}

Eine Debug-Probe unter: https://jsbin.com/dijazit/2/edit?html,css,output

Wie wir diese weißen Linie entfernen? Schätze jede Hilfe hier.

Quelle

2016-03-29 moondram

Willkommen bei Stack-Überlauf! Fragen, die Code-Hilfe suchen, müssen den kürzesten Code enthalten, der für die Reproduktion in der Frage selbst erforderlich ist **. Obwohl Sie einen [** Link zu einem Beispiel **] angegeben haben (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can- Wenn die Verknüpfung ungültig werden würde, wäre Ihre Frage für andere zukünftige SO-Benutzer mit demselben Problem nicht von Bedeutung. –

Wäre es nicht eine Lösung, die Ihrem zweiten Div -199px statt -200 gibt? dann gibt es keine weiße Linie mehr in Chrom. Das wäre ein schneller aber dreckiger Workaround. –

Danke @Paulie_D, habe den Code aktualisiert. – moondram

Dies ist ein bekanntes Problem beim Rendern transformierter Elemente in Chrome. Was es merkwürdiger macht, ist die Tatsache, dass wir auf viele ähnliche Probleme stossen und jedes Mal, wenn der Fix für den vorherigen (sehr ähnlichen) Fall angewendet wird, funktioniert er nicht für den aktuellen.

Für dieses spezielle Szenario scheint es, ein transparentes 1-Pixel-Rahmen um die Elemente hinzuzufügen, es zu beheben.

.abc { 
 
    position: absolute; 
 
    left: 0px; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: green; 
 
    transform-origin: 0% 100%; 
 
    transform: skewX(-10deg); 
 
    border: 1px solid transparent; 
 
} 
 
.def { 
 
    position: absolute; 
 
    left: 200px; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: green; 
 
    transform-origin: 0% 100%; 
 
    transform: skewX(-10deg); 
 
    border: 1px solid transparent; 
 
}

<div class="abc"></div> 
 
<div class="def"></div>

Quelle

2016-03-29 16:46:58 Harry

würde ich das zweite Element um ein Pixel nach links bewegen. Also statt:

left: 200px;

Verwendung:

left 199px;

Siehe Schnipsel unten:

NB! Sie können auch die Breite des Elements um 1 Pixel erhöhen, um die genauen Abmessungen beizubehalten.

.abc { 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: green; 
 
    position: absolute; 
 
    left:0px; 
 
    transform: skewX(-10deg); 
 
    transform-origin: 0% 100%; 
 
} 
 

 
.def { 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: green; 
 
    position: absolute; 
 
    left:199px; 
 
    transform: skewX(-10deg); 
 
    transform-origin: 0% 100%; 
 

 
}

<div class="abc"></div> 
 
<div class="def"></div>

Quelle

2016-03-29 18:02:00

Wie entfernen Sie die weißen Kanten, die zwischen zwei verzerrten Elementen erscheinen?

Antwort

Verwandte Themen