サウウェブ

B'z、映画、海外ドラマ、スケボー、車、BUMPのブログ

WEB

【css】-webkit-transitionを使ったときに画像がズレる・ピクピクするときの不具合対処法

2017/03/17

PC ノートPC パソコン macbook

マウスオーバー時に画像がズレる現象の修正方法をまとめました。

スポンサーリンク

現象

画像のマウスオーバー時に画像をふわっと透過させたりする処理で下記のように-webkit-transitionを使うことがあります。
それがchromeではマウスオーバー時にピクっと画像がズレる現象が起きます。

 

対策

該当の箇所に下記を追加すればズレる現象はなくなります。

 

まとめ

IEやFirefoxではこの現象にならないのでchrome用の対策です。
ちなみに
-webkit-backface-visibility: hidden
はscaleやrotateを使用したときにもエッジをキレイにします。

この記事が気に入ったら
いいね ! しよう

-WEB