Obraz znika po pomniejszeniu do 40% w przeglądarce Firefox. Aż do powiększenia 50%, jest w porządku. Jednak w zoom 40%, to po prostu znika: Powtarzający się obraz tła znika/zlewa się podczas oddalania
Natomiast w Chrome obraz jest nadal widoczny, ale nieco mylące, to dzieje się na różnych poziomach powiększenia:
dla razu Internet Explorer jest rzeczywiście wyświetlające oczekiwany wynik niezależnie od powiększenia!
Co to jest trójząb inaczej niż w przypadku webkita i gecko, i jak mogę to naprawić?
Tutaj wszystko jest odpowiedni kod:
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>
Z jakich wersji przeglądarki Chrome i Firefox korzystasz? Nie próbowałem go w systemie Windows, ale na moim Macu w przeglądarce Chrome i Firefox jest poprawnie ładowany. – loganfarr
Chrome 43,45,46 i Firefox 38 (i myślę, że to było 32?) Wszystkie pokazały to zachowanie w systemie Windows 8.1. Są to całkiem przypadkowe wersje tbh, testowałem je po każdej aktualizacji przeglądarki; Miałem nadzieję na poprawkę, ale problem nadal istnieje. – jaunt
najnowszy Firefox w wersji 10 nie naprawia problemu. działa dobrze. W każdym razie, nawet jeśli te dni działają lepiej niż poprzednio, przy korzystaniu z px nadal próbuję unikać jak najwięcej nieparzystych liczb. Często jest nieładnie z układami (w twoim przypadku jest to najwyższa wartość 113 pikseli). –