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

Date:	2016.08.01
Update:	2020.02.24

執筆･監修

上杉洋　Hiroshi Uesugi

1991年生まれ。株式会社ステップバイワーク代表。 2013年に株式会社n.uを設立。 2015年にStep by workとして独立。 2021年株式会社ステップバイワークとして法人化。 HP制作/SEO対策/コンテンツ制作/動画制作/YouTube運用/写真撮/WordPressを全て一人でやります。

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