IE8でjQueryのアニメーションがうまく動作しない場合の対処法

スライドショーやアコーディオンメニューなどのアニメーションをjQueryベースに構築することも一般的になりました。一昔前は簡易的なアニメーションもFlashで構築していましたが、徐々に、そして確実にJSに移行しています。

jQueryはクロスブラウザ対策を目的に導入されることもあります。しかし、複雑なアニメーションなどを構築する場合に、IE8では問題が発生することがあります。

そこで、IE8の問題とその対策手段をまとめてみたいと思います。

IE8でマウスオン／アウトが効かない

jQueryのマウスオン、マウスアウトイベントがIE8のみ反応してくれない場合があります。

	$("#sample").mouseover(function(){…（省略）
	$("#sample").mouseout(function(){…（省略）

そのような時には、マウスエンターとマウスリーブに切り替えると改善する場合があります。

	$("#sample").mouseenter(function(){…（省略）
	$("#sample").mouseleave(function(){…（省略）

但し、そもそも機能が異なるので、要素構造によっては全てのブラウザで本来の挙動と違う動きをする可能性があるので注意が必要です。

詳細は割愛しますが、mouseoverとmouseenterの違いなどを検索してみると分かるでしょう。

jQueryのフェードイン、フェードアウトアニメーションで、イージングが効かずにぱっと切り替わってしまう、また、フェードインしても要素が表示されないといった事が発生することがあります。

	$("#sample").fadein();
	$("#sample").fadeout();

そのような時には、要素に「display: block;」を設定すると、スムーズに行く場合があります。

#sample{
	Display: block;
}

つまりインライン要素だとIE8ではイージングは効きませんよ、という事でしょうか。
また、別の方法として以下のようにすると改善するという話もあります。

#sample{
	filter: inherit;
}

どちらが効果あるのかないのか、HTML+CSS構成やJSの内容によるようです。

IE8で、上記の対策をしてみたが改善しない、または、別の事象で挙動が変で悩んでいる。そんな場合は一つ下のバージョンであるIE7互換モードにしてしまいましょう。

これらの問題は、IE8に組み込まれたレンダリングエンジンが原因だと考えられます。
IE8が公開された当時は、急にページの画像が表示されなくなったなどの問題が発生したようです。詳細は不明ですが、IE8の画像描写周りの仕様がさまざまな問題の起因となっているのは推測されます。

そこで、あの手この手を試しても改善しない場合は、最終手段としてIE7互換モードを指定するのも手かもしれません。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

headタグにこの1行を指定することで、IE7のレンダリングで表示します。つまりIE7と同じ見え方になるので、IE8だけの問題とあれば改善するはずです。逆にこれを指定するとIE7のバグも引き起こるので注意は必要です。

IE6がそろそろ切り離せそうなのに、IE8でもいろいろと問題がありそうです。この業界はIE問題とは一生付き合わなければいけないようですね。

posted : 2013.06.24