Chrome でホバーすると画像が右に移動する理由とその修正方法

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

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

CSS の検査

問題を調査するには、提供されている CSS を検査します。

<code class="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;
}</code>

問題への対処

代替解決策は、不透明なホバー要素の -webkit-backface-visibility プロパティを利用することです。このプロパティは、変形時に要素の背面がどのようにレンダリングされるかに影響します。この場合、Chrome の不透明度の変更によって引き起こされる意図しない動きに対処します。

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

<code class="css">-webkit-backface-visibility: hidden;</code>

その他の考慮事項

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

以上がChrome でホバーすると画像が右に移動する理由とその修正方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。