ホバー時の画像の移動: Chrome の不透明度の問題に対処する

ホバー時に画像がわずかに右に移動する問題がユーザーから報告されています。ただしChromeのみです。この問題は、画像の透明度を制御するために不透明度を使用することで発生します。

CSS の検査

この問題を調査するには、提供されている 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 プロパティを利用することです。このプロパティは、変形時に要素の背面がどのようにレンダリングされるかに影響します。この場合、Chrome の不透明度の変更によって引き起こされる意図しない動きに対処します。

次のプロパティをホバー状態に適用します:

-webkit-backface-visibility: hidden;

追加の考慮事項

-webkit-backface-visibility プロパティは WebKit ブラウザーに固有であるため、他のエンジンではベンダー プレフィックスが必要になる場合があります。より包括的な情報については、CSS-Tricks ドキュメントを参照してください。