5
Hình ảnh biến mất khi thu nhỏ tới 40% trên Firefox. Cho đến khi zoom 50%, nó là tốt. Tuy nhiên tại zoom 40%, nó chỉ biến mất: 
Hình nền lặp lại sẽ biến mất/lệch hướng khi thu nhỏ
Trong khi trong Chrome hình ảnh vẫn còn nhìn thấy được nhưng hơi lệch, điều này xảy ra ở các cấp độ khác nhau của zoom: 
Đối với lần trình duyệt Internet Explorer là thực sự hiển thị kết quả mong đợi bất kể zoom!
Trident hoạt động khác với webkit và gecko và cách tôi có thể vá nó?
Dưới đây là tất cả các mã liên quan:
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>
Bạn đang sử dụng phiên bản Chrome và Firefox nào? Tôi đã không thử nó trên Windows nhưng trên máy Mac của tôi trên cả Chrome và Firefox, nó đang tải một cách chính xác. – loganfarr
Chrome 43,45,46 và Firefox 38 (và tôi nghĩ là 32?) Tất cả đều hiển thị hành vi này trên Windows 8.1. Đây là những phiên bản khá ngẫu nhiên tbh, tôi chỉ thử nghiệm nó bất cứ khi nào tôi cập nhật trình duyệt; Tôi đã hy vọng cho một bản vá nhưng vấn đề đã tồn tại. – jaunt
Firefox mới nhất dưới w10 doens't tái tạo vấn đề của bạn. nó hoạt động tốt. Dù sao, ngay cả khi những trình duyệt này hoạt động tốt hơn nhiều so với trước đây, khi sử dụng px tôi vẫn cố gắng tránh càng nhiều số lẻ có thể. Nó lộn xộn thường với bố trí (trong trường hợp của bạn là giá trị hàng đầu 113px) –