Das Bild verschwindet, wenn in Firefox auf 40% verkleinert wird. Bis zum Zoom 50% ist es in Ordnung. Jedoch bei Zoom 40%, es verschwindet einfach: Ein sich wiederholendes y-Hintergrundbild verschwindet/verschiebt sich beim Herauszoomen
Während in Chrome das Bild immer noch sichtbar, aber leicht falsch ausgerichtet, so geschieht dies auf verschiedenen Ebenen des Zoom:
Ausnahmsweise Internet Explorer ist eigentlich die Anzeige erwartetes Ergebnis unabhängig vom Zoom!
Was macht dreizack anders als webkit und gecko, und wie kann ich es patch?
Hier alle relevanten Code:
body {
background-color: rgba(31, 59, 8, 1);
}
#main {
z-index: 1;
position: absolute;
top: 113px;
left: 50%;
width: 900px;
height: 100%;
margin-top: 160px;
background-image: url('http://i.stack.imgur.com/zZCB2.png');
background-repeat: repeat-y;
margin-right: -50%;
text-align: center;
transform: translateX(-50%);
}
#main:before {
content: " ";
position: absolute;
left: 0px;
top: -113px;
background-image: url('http://i.stack.imgur.com/7DE7i.png');
background-repeat: no-repeat;
width: 900px;
height: 113px;
}
#main:after {
content: " ";
position: absolute;
left: 0px;
bottom: -200px;
background-image: url('http://i.stack.imgur.com/DVJAq.png');
background-repeat: no-repeat;
width: 900px;
height: 200px;
}
<div id="main"></div>
Welche Versionen von Chrome und Firefox verwenden Sie? Ich habe es nicht unter Windows versucht, aber auf meinem Mac sowohl in Chrome als auch in Firefox wird es korrekt geladen. – loganfarr
Chrome 43,45,46 und Firefox 38 (und ich denke, es war 32?) Haben alle dieses Verhalten auf Windows 8.1 gezeigt. Das sind ziemlich zufällige Versionen tbh, ich habe es gerade getestet, wenn ich den Browser aktualisiert habe; Ich hatte auf einen Patch gehofft, aber das Problem ist geblieben. – jaunt
neuesten Firefox unter W10 replizieren Ihr Problem nicht. es funktioniert gut. Wie auch immer, auch wenn heutzutage Browser viel besser funktionieren als vorher, versuche ich bei der Verwendung von px immer noch so viele ungerade Zahlen wie möglich zu vermeiden. Es geht oft mit Layouts (in Ihrem Fall der 113px oberen Wert) –