IE11,Edgeで固定背景のスクロールガタつき問題対策

PC・スマホ,ブラウザ 0 comment

[ie,edgeガクガク]
[ie,edgeガクガク]

「ン？ 何のこっちゃ！」という方は、積極的にスルー願います。

このブログ、ほぼ釣り日記化してるけど、Web製作のお勉強も兼ねてて、表示のカスタマイズなど色々試している。
背景がちょっと寂しかったので、ワードプレスのプラグインを使い、てきとーな写真を配置・切り替えしている。
ところが、MS系ブラウザでスクロールすると背景がカクカクとガタついて、ひじょーに「目に悪い」ことになっていた。
MS謹製ブラウザはふだん使ってないからなかなか気付かなかったけど、症状をまとめるとこんな感じ。

○ Windows10上のMS EdgeとIE11で、マウスホイール、スクロールバークリックでのスクロール時に固定背景がカクカクとガタつく
○ IE11でスクロールバーをつかんで動かすときは問題なし（Edgeではカクカク）
○ IE11のオプションでスムーズスクロールを解除すると、背景カクカクはしなくなる
○ Firefox、Chromeでは、まったく問題なし

MS系ブラウザには長年お世話になってきた反面、色々とお手間も掛けさせられてきた。
まだお手間が続いてる、ということか・・
ネットで情報収集すると、同様の不具合と対策がいくつか見つかった。

○ 割と有名なバグだけど、未だに直っていない、とゆーことらしい（IEはともかく、Edgeがこれじゃあ・・）
○ iOSではそもそも、CSSの background-attachment:fixed で背景固定ができないらしい（それ系の環境がないので未確認）
○ 対策はいくつかあるみたいだけど、副作用などもあって決定打に欠ける（それならいっそ、背景画像あきらめた方が・・）
○ z-index（重なり順序を指定するCSSプロパティ）のマイナス値が原因の一つ、との内容の記載があった

参考にさせていただいた主なページ
「IE、Edgeでposition:fixedな要素がスクロール時にガタつく場合の対応策」※リンク切れ
「スクロールしない背景画像が設定できるようになりました」
「IE11でFixedの要素がスクロール時にガタつく問題」

ということで、情報を元に色々試した結果、自分の環境ではz-indexの値を調整することで何とかなった。
以下、その覚え書き。

このブログの固定背景は、WordPressプラグインの Background Manager で設置している。
プラグインフォルダの resources/css にある pub.css を確認すると、背景表示に関わる部分5箇所に、z-indexのマイナス値があった。

#myatu_bgm_bg_link{z-index:-1995;}
（中略）
#myatu_bgm_prev{z-index:-1999;}

まずはこのz-indexをプラス値（5～1、値の大小はそのままの順番）に変更した。
しかしこれをやると、サイトのコンテンツが背景画像に隠されてしまう。

背景が前に・・
背景が前に・・

これは、コンテンツがposision未指定（position:static）で、z-indexが0と見なされ、背景よりも後ろの設定になるため。
今までは画像のz-indexがマイナスだったので背景に回っていた、ということ。

bodyにはz-indexが効かなかったので、bodyのすぐ内側のdiv要素（私の環境ではid="container"のdivがあった）に次の通り設定した。

#container {
position: relative;
z-index: 6;
}

これで、コンテンツが背景の前に出てきた。
手持ちの環境で背景カクカクその他、表示に問題ないことを確認して対策完了。
これでほぼ問題なくなったけど、下記の点だけ対応できていない。

○ Edge、IE11で一番下まで／下からスクロールすると、最後／最初に一瞬、背景が「カクッ」となる　　→ 一番下で一瞬だけなので、目をつぶる
○ プラグイン「Background Manager」のOverlayオプション（画像フィルター機能）をオンにすると、IE11で背景カクカクが再発　　→ オプションオフ
○ iOS系で表示・動作がどうなっているかは未確認

ひとつの対応事例として、どなたかのお役に立てば幸いです。

(2018/5/20追記)
久しぶりに確認したら、IE11で変な症状（一番下までスクロールすると、以後カクカク）が出ていた。
Z-indexをマイナスに戻すとおさまったが、今度はEdgeで激しくカクカク。
CSSハックでEdgeだけZ-indexをプラス値にして、現時点では解決。
・・MSさん、いーかげんにしてくダッセ～。

Posted by ごンた