「IE11」でスクロール時に固定背景画像がカクつく問題

「IE11」でスクロール時に固定背景画像がカクつく問題

IE(Internet Explorer)に泣かされることは多々あります。
WEB制作者の頭痛の種です。

徐々にIEの各バージョンも引退しつつありますが、最後の砦である「IE11」は未だ現役です。

今回はこの「IE11」で、スクロール時に固定背景画像がカクつく問題についてです。

発生条件

発生条件は、CSSで背景画像に
position : fixed
background-attachment : fixed
どちらかを適用した場合に起こるようです。

ま、百聞は一見にしかず。
以下のページをPCから見てください(スマホ・タブレットは画像非表示)。

サンプルtmp001(no-js)

Chrome・Firefox・Edge・Safariなどでは普通に見れます。
普通のサンプルサイトです。

今度はこれをIEで見てみましょう。
マウスでページをスクロールすると、ページ中段の固定背景画像がカクつくのが分かると思います。

カクカクカクッと、見ていて不愉快そのものです。
(こんなの納品できないですね)

この事象は、ページをマウスでスクロールした場合に起きて、スクロールバーを使った場合には発生しません。

ちなみに、この画像はパララックス効果を出すために、CSSの「background-attachment : fixed」で固定しています。

原因

この事象の原因は、IEのバグです。

IEの「スムーズスクロール」という機能が引き起こしてるようです。

「スムーズスクロール」とは、マウスホイールを回転させると1行ずつ画面をスクロールさせるという機能で、デフォルトではONになっています。

IEが1行ずつスクロールするのがウザい。 | 教えて君.net

なので、この機能をOFFにすると、

スクロールは少し荒いですが、カクつきは止まります。

対処法

ただ、WEB制作者としては別な対処方法が必要となります。

対処法は、ググるとネット上に幾つか載ってました。

その中でもこちらのブログが詳しいです↓
(勉強になりました。ありがとうございます)

IE、Edgeでposition:fixedな要素がスクロール時にガタつく場合の対応策

このブログの中の「対応策3」が有効でした。

以下のJSコードを記述します。

<script>
 if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident\/7\./) || navigator.userAgent.match(/Edge\/12\./)) {
 $('body').on("mousewheel", function () {
 event.preventDefault();
 var wd = event.wheelDelta;
 var csp = window.pageYOffset;
 window.scrollTo(0, csp - wd);
 });
 }
</script>

これでIEの「スムーズスクロール」は無効となります。

JS記述後の挙動は以下のページで確認してください。

サンプルtmp001

海外のサイトでは・・

日本のサイトでは、このIE対策を施したところは多いです。

ですが、海外のサイトではカクつきを放置してるところがけっこうあります。

たとえばこちら↓

CleanMate – Cleaning Company Maid Gardening Template

格好良いテンプレートのデモサイトですが、IEで見ると中段以下の3枚の固定画像はもろにカクつきます。

これは海外と日本のIE使用率の差からくるのでしょう。

全世界ではIEの使用率は1割を切ってます。
いまさら滅びゆくIEになんか構ってられるかという感じなのでしょうね。

 

ken
IEの早期引退を望みます