2015-10-17 35 views
5

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: Zoom comparison FirefoxPowtarzają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: Chrome misalignment

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>

+2

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

+0

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

+1

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). –

Odpowiedz

2

Dokonywanie body.png obraz 20px wysoki czy tak będzie rozwiązać problem. Powtarzające się obrazy 1px czasami zachowują się dziwnie. Powinien pomóc w przerysowaniu/migotaniu podczas ładowania elementu.

Również ustawienie "#main: before", aby mieć górę -112px zamiast -113px pozbyło się funky line w Chrome przy powiększaniu (przynajmniej dla mnie).

Nadzieję, że pomaga.

+0

Podczas gdy rozwiązanie 20px to świetne podejście, planuję mieć pionowo rosnące/kurczące się obiekty na stronie i nie byłoby dobrze, gdyby strona po prostu skakała. Dziękuję za sugestię związaną z pozycjonowaniem, ponieważ obraz ma wysokość 113 pikseli, co spowodowałoby nakładanie się 1px, więc zamiast tego po prostu zmienię rozmiar obrazu. Jestem bardziej ciekawy, dlaczego tak się nie dzieje w IE, a nie w bardziej popularnych przeglądarkach niż w przypadku rzeczywistego rozwiązania; jakakolwiek poprawka z wyjaśnieniem jest bardzo doceniane :) – jaunt

1

Nie jestem pewien, ale wierzę, jeśli podzielić obrazy i zrobić 3 części: :: wcześniej (biały top, z dolnym cieniem) :: nagłówku (czerwone pole) :: po (białym dnie , z górnym cieniem z czerwonego pola)

Mam nadzieję, że ta odpowiedź pomoże!

+0

Czy możesz mieć ':: before :: before'? Nagłówek definiuje się za pomocą obrazu z selektorem pseudo-klasy ':: before', który jest preferowany, ponieważ pozwala starszym wersjom przeglądarek renderować go identycznie do nowoczesnych przeglądarek. – jaunt

+0

Przepraszamy za późną odpowiedź, ale wierzę, że działa. Teraz nie jestem profesjonalny, jeśli chodzi o to: D –