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

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

backface-visibility

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

スポンサードリンク

コード

html

 

CSS

 

 

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

修正の仕方

CSS

解説

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