2015-10-17 3 views
5

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

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>

+2

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

+0

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

+1

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

Antwort

2

machen Ihre body.png Bild 20px groß oder so wird das Problem zu beheben. 1px Wiederholungsbilder wirken manchmal komisch. Sollte helfen mit Neuzeichnen/Flackern, während das Element auch geladen wird.

Auch die Einstellung der "#main: before", um eine Spitze von -112px anstelle von -113px zu haben, wurde die funky Linie in Chrome los, wenn Sie hineinzoomen (zumindest für mich).

Hoffe, dass hilft.

+0

Während eine 20px-Lösung ein großartiger Ansatz ist, habe ich vor, vertikal wachsende/schrumpfende Objekte auf der Seite zu haben und es würde nicht gut aussehen, wenn die Seite einfach in der Größe springt. Danke für den Vorschlag mit der Positionierung, da das Bild 113px groß ist, würde es eine 1px Überlappung verursachen, stattdessen ändere ich einfach die Größe des Bildes. Ich bin mehr neugierig, warum dies nicht in IE geschieht, noch in den populäreren Browsern als ich über die tatsächliche Lösung bin; jede Reparatur mit einer Erklärung wird aber sehr geschätzt :) – jaunt

1

Ich bin nicht sicher, aber ich glaube, wenn Sie die Bilder geteilt und 3 Teile machen: :: vor (weiß oben, unten mit Schatten) :: Header (die rote Box) :: after (weiß Boden , mit oberem Schatten von der roten Box)

Ich hoffe, dass diese Antwort hilft!

+0

Kannst du ':: before :: before'? Der Header wird definiert, indem ein Bild mit dem Pseudoklassen-Selektor ':: before' verwendet wird, was zu bevorzugen ist, da es älteren Browserversionen ermöglicht, es identisch mit modernen Browsern zu rendern. – jaunt

+0

Sorry für späte Antwort, aber ich glaube, dass funktioniert. Jetzt bin ich nicht professionell, wenn es darum geht: D –