chromeでh:hoverした際にずれる現象
マウスオーバーした時に透過するやつなんですけど、chromeだと、マウスオーバーした時に１px程度右に何故か大きくなるバグに遭遇。 コードは以下の様。
スポンサードリンク
コード
html
|
1 |
<li> <a href="#"> <p class="box1"> <img src="aaa.jpg"> </p> </a> </li> |
CSS
|
1 2 3 |
a .box1 img{ @include transition(all 0.8s); opacity: 1; } a:hover .box1 img { opacity: 0.8; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; @include transition(all 0.3s); } |
これ以外にも様々なコードが書かれていたけど省略。もしかしてそっちに原因があったのかも。
修正の仕方
CSS
|
1 2 3 4 5 6 7 8 9 10 |
a .box1 img{ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 0.2s ease-in; transition: 0.2s ease-in; filter: alpha(opacity=100); opacity: 1; } |
解説
マウスオーバーする前のimgにbackface-visibilityというプロパティをつけてあげました。 3D表示の際の背景をコントロールするプロパティらしいのですが、これをつけると何故か治ります。ハック的な解決方法かな。。。 CSS3で3D描画なんて高等テク、縁がないので初めて知りました。