Bild verschieben/springen nach CSS Übergangseffekt mit Skala in Firefox transformieren

Question

Ich habe ein Problem in der neuesten Firefox Browser-Version 34 (System: Windows 7, Bildschirmbreite: 1600px). Ich habe mit Zoom-Bildern (in einigen Containern) nach dem Hover darauf reagiert. Ich benutze Transform: Maßstab (1.1) mit Übergang: transformieren 0.3s Ease-in-Out. Aber wenn ich über das Bild schwebe und nach dem Bild heranzoome, mache ich seltsame 1px-Verschiebungen. Einige Rendering-Browser-Bug, aber ich hoffe, dass einige dafür beheben. Bitte, hilf!

Wichtigste CSS-Definition:

figure { 
    display: block; 
    overflow: hidden; 
    position: relative; 
    backface-visibility: hidden; 
} 
figure img { 
    width: 100%; 
    transform: scale(1); 
    transition: transform 0.3s ease-in-out; 
    } 
figure:hover img { 
    transform: scale(1.1); 
} 

..und Teil von HTML-Code:

<figure> 
    <img class="img-responsive" src="http://lorempixel.com/600/400/fashion/7"> 
</figure> 

---

Probe mit Bug hier online ist: http://templates.silversite.pl/test/jumpingimg/

ich sah auch, dass jemand kann es reparieren, aber ich weiß nicht wie, zB box „Unsere jüngsten Arbeiten“ auf http://demo.qodeinteractive.com/bridge/

Answer 1

auf den Link, der Ihnen zur Verfügung gestellten, http://demo.qodeinteractive.com/bridge/, wenn Sie tatsächlich hier gehen: http://demo.qodeinteractive.com/bridge/portfolio/gallery-style-condensed/two-columns-grid/, können Sie, dass, sobald Blick auf dev-Tools sehen, dass sie eine Marge von „1px“ auf gelten links/rechts

.projects_holder.hover_text.no_space article .image img { 
    margin: 0 1px; 
} 

Wenn Sie diesen Stil zu deaktivieren, müssen Sie das Bild bewegen sehen, wie Sie beschreiben, sind, wenn auf dem Bild schweben.

Daher CSS für das Bild sollte sein:

figure img { 
    width: 100%; 
    transform: scale(1); 
    transition: transform 0.3s ease-in-out; 
    display: block; /* (or inline-block) */ 
    margin: 0 1px; 
} 

Answer 2

ich an meinem Projekt hatte ein ähnliches Problem. Alle Bilder waren position: absolute; und die aussehen, die Transformation:

figure img{ 
    transform: translate(-50%, 50%) scale(1); 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 

figure img:hover{ 
    transform: translate(-50%, 50%) scale(1.1); 
} 

ich jeden scale mit scale3d ersetzen und dass mein Problem gelöst. Die endgültigen Stile sehen wie folgt aus:

figure img{ 
    transform: translate(-50%, 50%) scale3d(1, 1, 1); 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 

figure img:hover{ 
    transform: translate(-50%, 50%) scale3d(1.1, 1.1, 1); 
} 

Hoffnung, dass Ihr Problem beheben ist