ホバーで画像が動く-クロムの不透明度の問題

ここの私のページに問題があるようです：http： //www.lonewulf.eu

サムネイルにカーソルを合わせると、画像が少し右に移動し、Chromeでのみ発生します。

私のCSS：

.img{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -khtml-opacity: 0.5;
    display:block;
    border:1px solid #121212;
}
.img:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity: 1; 
    opacity: 1;
    -khtml-opacity: 1;  
    display:block;
}

別の解決策は、

-webkit-backface-visibility: hidden;

不透明度があるホバー要素上。裏面表示はに関連するtransformため、@ Beskowはそれと関係があります。これはWebkit固有の問題なので、Webkitの裏面表示を指定するだけで済みます。他のベンダープレフィックスがあります。

詳細については、http：//css-tricks.com/almanac/properties/b/backface-visibility/を参照してください。

何らかの理由で、Chromeは不透明度が1でない要素の位置を別の方法で解釈します。CSS属性position:relativeをa.img要素に適用すると、不透明度が変化するため、左/右の動きはなくなります。

同じ問題がありましたが、css変換回転で修正しました。このような：

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);

主要なブラウザで正常に動作します。

この問題を修正したもう1つの解決策は、ルールを追加することでした。

will-change: opacity;

私の特定のケースでは、これにより、translateZ(0)Chromeで問題を修正したにもかかわらず、Internet Explorerで発生したのと同様のピクセルジャンプの問題が回避されました。

他のソリューションのほとんどは、変換（例えば関与することをここで提案translateZ(0)、rotate(0)、translate3d(0px,0px,0px)より効率的なレンダリングを可能にし、GPUに超える要素の取り扱い絵によって、など）の仕事を。will-changeおそらく同様の効果を持つブラウザーにヒントを提供します（ブラウザーがより効率的に遷移をレンダリングできるようにします）が、ハックは少なくなります（GPUを使用するようにブラウザーを微調整するだけでなく、問題に明示的に対処しているため）。

それを言って、それがいることを念頭に価値があるブラウザのサポートがために良いようではありませんwill-change（！問題がChromeである場合にのみ、これは良いことかもしれませんが）、およびいくつかの状況では、導入することができ、独自の問題を、まだ、それはこの問題の別の可能な解決策です。

この不具合を防ぐにはbackface-visibility、transformルールとルールの両方を適用する必要がありました。このような：

a     {-webkit-transform: rotate(0);}
a img {-webkit-backface-visibility: hidden;}

ホバー時の（不透明でない）フィルターに同様の問題がありました。以下を使用して基本クラスにルールを追加することで修正されました：

filter: brightness(1.01);

backface-visibility（または-webkit-backface-visibility）では、Chromeの問題のみが修正されました。FirefoxとChromeの両方で修正するには、上記の回答を次のように組み合わせて使用​​しました。

//fixes image jiggle issue, please do not remove
img {
  -webkit-backface-visibility: hidden; //Webkit fix
  transform: translate3d(0px,0px,0px); //Firefox fix
}

Safari 8.0.2でも同様の問題が発生しました。この問題では、画像の不透明度が変化すると画像が揺れてしまいます。ここに投稿された修正はどれもうまくいきませんでしたが、以下はうまくいきました：

-webkit-transform: translateZ(0);

この後続の回答によるこの回答へのすべてのクレジット

グリッド内の画像でこの問題に遭遇しました。各画像は、display：inline-blockが宣言されているにネストされていました。Jamlandが上に投稿したソリューションは、表示時の問題を修正するために機能しました。親要素で宣言されました。

画像が順不同のリストにある別のグリッドがあり、display：blockと宣言することができました。親リストアイテムの幅と宣言されたbackface-visibility：hidden; 画像要素上にあり、ホバー時に位置のシフトがないようです。

li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }

解決策アルピペゴはこの問題で私に役立ちました。これを使用-webkit-backface-visibility: hidden; すると、ホバーの不透明度遷移で画像が移動しません

/* fix error hover image opacity*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

他のすべてのソリューションを壊す可能性があるCSSの変更が必要なため、他のすべてのソリューションで問題が発生しました。position：relativeでは、要素の配置方法を完全に再考する必要があります。transform：rotate（0）は既存のソリューションと干渉する可能性がありますトランジション期間が設定されていると、変身して変な小さなトランジション効果が得られます。また、裏面が実際に必要な場合（および多くの接頭辞が必要な場合）は、裏面表示は機能しません。

私が見つけた最も怠惰な解決策は、非常に近いが1ではない要素に不透明度を設定することです。これは、不透明度が1の場合にのみ問題になるため、他のスタイルを壊したり妨害したりすることはありません。

opacity:0.99999999;

リックギナーの答えを正解としてマークしたところ、問題が解決しないことがわかりました。

私の場合、max-width div内にレスポンシブ幅の画像が含まれています。サイトの幅が最大幅を超えると、ホバーで画像が移動します（CSS変換を使用）。

私の場合の修正は、最大幅を単に3の倍数、この場合は3列に修正することでしたが、完全に修正されました。

CSSに不透明度が含まれていることに気づきました。Chromeでもまったく同じ問題が発生しました（ホバー上で画像が動く）..不透明度を無効にするだけで解決し、画像が動かなくなりました。

.yourclass:hover {
  /* opacity: 0.6; */
}

同じ問題がありましたが、私の修正では、imgタブでsrcの前にクラスを配置していました。