Firefoxでのスケール変換によるCSSトランジションエフェクト後の画像のシフト/ジャンプ

Question

最新のFirefoxブラウザのバージョン34（システム：Windows 7、画面の幅：1600px）に問題があります。私はそれをホバリングした後に（いくつかのコンテナ内の）画像をズームすることで効果を発揮した。私は変換を使用しています：スケール（1.1）とトランジション：トランスフォーム0.3sイージーインアウト。しかし、私が画像上にマウスを置くと、画像がズームインした後、それはいくつかの奇妙な1pxシフトを行います。いくつかのレンダリングブラウザのバグが、私はそれが既存のいくつかの修正を願っています。助けてください！

最も重要なのCSSの定義：

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); 
} 

..and HTMLコードの一部：

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

---

バグとサンプルはここにオンラインである：http://templates.silversite.pl/test/jumpingimg/

また、私はそれを見ました誰かがそれを修正することができますが、私はどのように、例えば、あなたが実際にここに行く場合は、http://demo.qodeinteractive.com/bridge/を提供するリンク上でhttp://demo.qodeinteractive.com/bridge/

Answer 1

上のボックス「我々の最近の仕事」：http://demo.qodeinteractive.com/bridge/portfolio/gallery-style-condensed/two-columns-grid/は、あなたは彼らが「1ピクセル」のマージンを適用することを、一度のdevのツールを見て、それを見ることができます左右に表示されます

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

このスタイルを無効にすると、画像にカーソルを置いたときの画像が表示されます。

そのため、画像のためのあなたのCSSは次のようになります。

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

Answer 2

私は私のプロジェクトで同様の問題がありました。私はscale3dですべてのscaleを交換し、それは私の問題を解決し

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

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

：すべての画像はposition: absolute;とような表情を変換しました。 最終的なスタイルは、そのように見える：あなたの問題を解決しますだ

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); 
} 

希望