1px Glitch erscheint unter Bild, wenn der Browser das Hintergrundbild verkleinert

Question

Dies ist ein bisschen seltsam und kann entweder ein Browserfehler oder etwas falsch mit dem Bild sein, wenn in Photoshop gespeichert, aber ich dachte, ich würde trotzdem fragen. Bei der Größenanpassung eines Hintergrundbildes, das auf background-size: cover; eingestellt ist, scheint eine ungerade 1px-Linie an der Basis des Bildes zu erscheinen. Es wird auf der Website ziemlich auffällig, da die Hintergrundfarbe schwarz ist. Es ist nicht eine Farbe, die ich frage, ob es Browser Glitch ist, siehe unten:

Ich habe mehrere Bilder versucht, und ich denke, es kann in Chrome und Safari zu sehen. Der Glitch kann definitiv auf this jsfiddle in Chrome repliziert werden (Sie müssen das Browserfenster neu skalieren und es muss ziemlich groß sein, um es zu sehen).

Answer 1

Ich glaube, das ist ein Problem zwischen background-position: bottom und background-size: cover. Ich habe bemerkt, dass, wenn wir background-position: bottom entfernen, es keinen Fehler gibt. Wahrscheinlich ein Problem mit Webkit-Browsern, obwohl ich dafür keinen Fehlerbericht gefunden habe.

Sie können dieses Problem beheben, indem Sie background-position: 50% 99% verwenden, bis der Fehler behoben ist. Wenn jemand eine bessere Antwort hat, werde ich interessiert sein zu wissen :).

body{ 
 
    background: #000; 
 
} 
 

 
.hero{ 
 
    background-image: url('http://i.imgur.com/R7WAday.jpg'); 
 
    height: 250px; 
 
    width: 100%; 
 
    background-size: cover; 
 
    background-position: 50% 99%; 
 
}

<div class="hero"> 
 
</div>