chromeで:hoverした際にずれる現象

chromeでh:hoverした際にずれる現象

backface-visibility

マウスオーバーした時に透過するやつなんですけど、chromeだと、マウスオーバーした時に1px程度右に何故か大きくなるバグに遭遇。 コードは以下の様。

スポンサードリンク

コード

html

 

CSS

 

 

これ以外にも様々なコードが書かれていたけど省略。もしかしてそっちに原因があったのかも。

修正の仕方

CSS

解説

マウスオーバーする前のimgにbackface-visibilityというプロパティをつけてあげました。 3D表示の際の背景をコントロールするプロパティらしいのですが、これをつけると何故か治ります。ハック的な解決方法かな。。。 CSS3で3D描画なんて高等テク、縁がないので初めて知りました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください