IE11・windows8.1でtransitionを使用するとバグる

Web制作 2016.08.01

画像にリンクを設定する際に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との組み合わせでバグが起こるとは盲点でした。
今後、各種ブラウザでチェックする際は注意したい箇所です。

Hiroshi Uesugi

Toyonaka,Osaka

最後まで読んでいただきありがとうございます!
フロントエンドエンジニアとして、大阪でフリーランスとしてWeb制作をしています。