5
L'immagine scompare quando si riduce a 40% su Firefox. Fino allo zoom del 50%, va bene. Tuttavia al di zoom 40%, svanisce appena: 
Un'immagine di sfondo ripetuta scompare/disallinea quando si rimpicciolisce
considerando che Chrome l'immagine è ancora visibile ma leggermente disallineata, questo avviene a diversi livelli di zoom: 
Per una volta Internet Explorer è in realtà la visualizzazione della risultato atteso indipendentemente dallo zoom!
Che cosa fa il tridente in modo diverso rispetto a webkit e gecko e come posso correggerlo?
Qui è tutto il codice in questione:
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>
Quali versioni di Chrome e Firefox stai utilizzando? Non l'ho provato su Windows ma sul mio Mac su Chrome e Firefox, si sta caricando correttamente. – loganfarr
Chrome 43,45,46 e Firefox 38 (e penso che fosse 32?) Hanno tutti mostrato questo comportamento su Windows 8.1. Queste sono versioni piuttosto casuali, tbh, l'ho appena testato ogni volta che aggiornavo il browser; Speravo in una patch, ma il problema è persistito. – jaunt
l'ultimo Firefox sotto w10 non replica il tuo problema. funziona bene Ad ogni modo, anche se in questi giorni i browser funzionano molto meglio di prima, quando si usa px cerco ancora di evitare il più possibile numeri dispari. Si confonde spesso con i layout (nel tuo caso il valore massimo di 113 px) –