Odd Box in Chrom

Ich versuche, eine animierte gif über einen jpg zu platzieren, und es scheint in den meisten Browsern (IE, Firefox, iPhone, iPad) zu arbeiten, aber es ist eine seltsame Kasten um den animierten gif in Chrom auf den Fenstern, firefox für den Mac und Chrom für den Mac.Odd Box in Chrom

Ich habe es schließlich durch ein paar seltsame Hacks gelöst, wie das Bild auf 99,9% zu skalieren, eine Maske zu verwenden, damit nur ein Teil des animierten Gif durchscheinen kann, aber gibt es eine bessere/sauberere Cross-Browser-Lösung ?

Ich begann im Grunde mit einem div und einem Bild im Inneren, die beide reagieren.
HTML:

<div> 
    <img src="http://www.enjoyillinois.com/images/animations/Garden_of_Gods_anim_full.gif" /> 
</div>

CSS:

div { 
    background-image: url("http://www.enjoyillinois.com/images/animations/Garden_of_Gods_bg.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

img { 
    width:100%; 
    display:block; 
}

ist hier ein jsfiddle: http://jsfiddle.net/GyDCx/7/

Quelle

2013-05-22 Robert McKee

Ziemlich coole Gif, die Sie dort haben. Und plus 1 für eine richtige Frage Konstruktion – DextrousDave

Ich bemerkte in Win7 Chrome es geht weg, wenn Sie die Größe des Fensters. Keine Lösung, ich weiß, aber vielleicht eine Führung ... –

Ja, es geht weg, wenn Sie die Größe des Fensters ändern. Es wird auch weggehen, wenn Sie eine Animation anbinden, die irgendeine Art der Größenänderung auslöst, das heißt, bis Sie es vom Bildschirm und zurück auf dem Bildschirm scrollen, dann erscheint es wieder wieder. –

Es ist ein Bildkantenskalierungsproblem ist die Lösung, die ich in solchen Fällen verwenden:

img{ image-rendering:-webkit-optimize-contrast; }

dass der verschwommenen Rand deaktiviert, wenn Bilder zu skalieren. http://jsfiddle.net/GyDCx/31/

Quelle

2013-05-24 12:48:19 Willem

+1 Dies scheint zu beheben. Nützlicher Trick! –

Dies scheint es für Chrome auf meinem Windows-Rechner zu beheben. Ich werde es erneut testen müssen, wenn ich am Dienstag für die Macs ins Büro zurückkehre. Genau das habe ich gesucht! –

Das behebt das Problem auf allen Plattformen, die ich getestet habe. Gute Antwort! –

Sie können versuchen:

-webkit-transform: translateZ(0px);

Dies wird es in Chrome beheben.

sehen: http://jsfiddle.net/PvnmK/7/

PS1: auch auf Safari und Firefox getestet.

Quelle

2013-05-24 06:03:08 JayMoretti

Kann die Grenze nicht sehen, selbst wenn ich die Größe 27.0.1453.93 oder sogar 17.0.963.66 für diese Angelegenheit verändere – JayMoretti

meinst du den Teil, wo es falsch ausgerichtet ist? darum geht es in der Frage. – JayMoretti

Von der @Jay Moretti Fiddle, wenn Sie Ihr 'div' zu 'inline-block;' machen, gehe ich davon aus, dass das Problem verschwunden ist. Aber ja, wenn Sie dehnen, skalieren die Bilder nicht gleichmäßig - @ user1846192 – Nitesh

Odd Box in Chrom

Antwort

Verwandte Themen