Chrome で画像の上にマウスを置くと画像が揺れるのはなぜですか?

画像の上にマウスを置く: Chrome の不透明度の問題

Chrome でのホバー操作中の画像の動き、特に不透明効果に関する問題が発生した場合、根本原因に対処するために不可欠です。この特定のケースでは、CSS ルール:

opacity: 0.5;

により、カーソルを上に置くと画像が半透明 (不透明度 50%) になります。ただし、ハードウェア アクセラレーションと WebGL レンダリングが原因で Chrome 固有の問題が発生します。

解決策:

この問題を解決するには、-webkit- を実装することをお勧めします。背面の可視性: 非表示;不透明度を適用するホバー要素のプロパティ。このプロパティは変換に関連しており、画像が 3D 空間にあることをブラウザが認識できるようにして、ジッター効果を防ぎます。

具体的には、次のルールを CSS に追加できます:

.img:hover {
  -webkit-backface-visibility: hidden;
}

追加情報:

-webkit-backface-visibility は Webkit 固有のプロパティであるため、他のブラウザではサポートされていない可能性があることに注意することが重要です。詳細とブラウザの互換性については、次のリソースを参照してください: https://css-tricks.com/almanac/properties/b/backface-visibility/.

以上がChrome で画像の上にマウスを置くと画像が揺れるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。