IE11・windows8.1でtransitionを使用するとバグる
画像にリンクを設定する際にCSS3のtransitionと:hoverを使用してホバーエフェクトをかけるとわざわざロールオーバーの画像を作らなくてもいいので非常に便利ですよね！
私もいつもこの方法で画像にエフェクトを施しているのですが、納品したデータを確認している時にIE9・Windows8.1という組み合わせでバグが発生していました。
<style>
a.link img{
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
a.link img:hover{
-webkit-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
</style><ul>
<li><a href="#" class="link"><img src="imgs/sample.jpg"></a></li>
<li><a href="#" class="link"><img src="imgs/sample.jpg"></a></li>
<li><a href="#" class="link"><img src="imgs/sample.jpg"></a></li>
<li><a href="#" class="link"><img src="imgs/sample.jpg"></a></li>
</ul>画像にマウスオン→マウスオーバーした際に画像が消える具合です。
正直解決方法は見つかってないのですが、緊急対策としてtransition効果をなくすことでバグは解消されました。
IE系ブラウザでのバグは多いですが、OSとの組み合わせでバグが起こるとは盲点でした。
今後、各種ブラウザでチェックする際は注意したい箇所です。