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

公開日:2016/08/01 更新日:2020/02/24

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

上杉 洋

1991年生まれ。株式会社ステップバイワーク代表。2013年からホームページ制作の業界に入り、以後フリーランスを経て2022年に起業。 独自の理論で費用対効果の高いホームページを作るため日々精進しています。