「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>