【css】-webkit-transitionを使ったときに画像がズレる・ピクピクするときの不具合対処法
マウスオーバー時に画像がズレる現象の修正方法をまとめました。
スポンサーリンク
現象
画像のマウスオーバー時に画像をふわっと透過させたりする処理で下記のように-webkit-transitionを使うことがあります。
それがchromeではマウスオーバー時にピクっと画像がズレる現象が起きます。
a img:hover{
filter: alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
}
対策
該当の箇所に下記を追加すればズレる現象はなくなります。
-webkit-backface-visibility: hidden; backface-visibility: hidden;
まとめ
IEやFirefoxではこの現象にならないのでchrome用の対策です。
ちなみに
-webkit-backface-visibility: hidden
はscaleやrotateを使用したときにもエッジをキレイにします。