ホバーすると CSS トランジション効果によって div が移動する CSS がいくつかあります。
問題は、例からわかるように、translateトランジションによって div 内の画像が 1 ピクセル下/右に移動し (場合によってはほんの少しサイズも変更される)、位置がずれて焦点が合わなくなるというひどい副作用があることです...
この不具合は、ホバー効果が適用されている間ずっと発生しているように見えますが、試行錯誤の過程から、translate トランジションが div を移動するときにのみ発生するように見えると断言できます (ボックスの影と不透明度も適用されていますが、削除してもエラーには影響しません)。
問題は、ページにスクロールバーがある場合にのみ発生するようです。したがって、div のインスタンスが 1 つだけの例では問題ありませんが、同一の div をさらに追加してページにスクロールバーが必要になると、問題が再び発生します...
ベストアンサー1
2020年アップデート
- 画像がぼやける問題がある場合は、以下の回答、特に
image-renderingCSS プロパティも必ず確認してください。 - アクセシビリティとSEOの観点からベストプラクティスとして、背景画像を
<img>タグに置き換えることができます。オブジェクトフィットCSS プロパティ。
元の回答
これを試してみてくださいCS:
.your-class-name {
/* ... */
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1, 1);
}
これにより、部門の動作が「より 2D 的」になります。
- 回転などで反転できるように、デフォルトで裏面が描画されます。左、右、上、下、拡大縮小、または（反）時計回りに回転するだけの場合は、裏面を描画する必要はありません。
- Z 軸を変換して常にゼロ値になるようにします。
- Chrome は、プレフィックスなしの および を処理するように
backface-visibilityなりました。現時点では、これが他のブラウザのレンダリング (FF、IE) にどのような影響を与えるかはわかりませんので、プレフィックスなしのバージョンは注意して使用してください。transform-webkit-