背景を固定した時、IEでガタガタ動く現象について

  • このエントリーをはてなブックマークに追加
背景画像を固定した時にIEでガタガタ動く現象について

Internet Explorerで発生する現象

スクロールしても背景画像が固定するような構成になっているWebサイトをよく見かけます。
これはCSSで背景画像に
position : fixed
background-attachment : fixed

とすることで固定にできるのですが、これがIE(Internet Explorer)で表示するとよろしくないのです・・・

実際に確認してみると、背景画像がスクロールに合わせて上下に揺れ始めます。荒ぶるのです。ご乱心です。
見ていてとても不快ですし、そんな状態で公開なんてとてもできません。
ちなみにこの現象、マウスホイールでスクロールした時に顕著に表れ、スクロールバーをドラック操作する場合には起こりません。

原因は「スムーズスクロール」

この現象はIEに実装されている「スムーズスクロール」が原因です。
解除するには「インターネットオプション」から「詳細設定」「スムーズスクロールを使用する」のチェックを外す事で解決できます。

ですがこれは個人設定なので、制作者側から操作する事ができない部分です。
利用者に「設定を直して」というのもなんだかおかしいですし、「背景が上下に揺れるから設定を変えよう」なんて利用者は珍しいでしょう。
相手に依存する解決手段は解決になっていないので、Webサイトの制作者からすると別のアプローチが必要になります。

jQueryを使って解決

あれこれと有効そうな方法を探して見ると、たくさんの情報が出てきます。
その中で実際に使ってみて良さそうな方法がこちら・・・

[JS]設置も超簡単、あなたのウェブページのスクロールを慣性スクロールにするスクリプト -NiceScroll

スクロールする時に余韻を持たせる事で、スクロールをすこしもたつかせてしまえ!という発想です。
設置もとても簡単で、すぐに実装する事ができます。
実際に導入して、IEでもストレスなく背景を固定する事ができました。

ちなみに最近では珍しくなった、スクロールバーのカスタマイズもできてしまいます。

Edgeが登場するも、IEはまだまだ現役

Windowsに標準でインストールされてるインターネットブラウザ「Edge」
IE11に変わる新たなブラウザとして導入されていますが、あまり知名度は低いように感じます。
それにIEについても9や10といった古いものはサポートがすっかり終了していますが、11はまだまだ現役です。
そのうちなくなるから・・・と思っていても、こればかりは利用者の環境によっては残り続けてしまう事もあるので、まだまだ対応に追われることになりそうです。

海外では「放置」が多数

背景を固定にした時、上下に震えないように対策をしているWebサイトは日本では多くあります。
ですが海外の場合は放置しているケースが多い様です。

これは海外と日本でIEの使用率に差がある事が原因だと思われます。
参考:WebブラウザシェアランキングTOP10(日本国内・世界) | ソフトウェアテスト・第三者検証ならウェブレッジ(https://webrage.jp/techblog/pc_browser_share/)

日本ではChromeに次いで2番目の利用率となる24.26%ですが、世界で見ると6.85%にとどまっています。
ちなみに利用率1位のChromeは日本では28.95%、世界では42.15%(Chrome 60.0)、10.52%(Chrome 61.0)となり、IEとChromeの利用者に差が大きくあることがわかります。(2017年10月時点)

とはいえ日本ではまだまだ現役で今後数年にわたって対応が必要になりそうなので、Microsoftによるブラウザのサポートが続く限りは対応していくようにチェックする必要がありそうですね。

  • このエントリーをはてなブックマークに追加

CONTACTお問い合わせ

ホームページ制作に関するご質問などございましたら、
お気軽にお問い合わせください。

※ブログ記事に関するご質問はお答えしかねます。

TEL:0258-31-5005FAX:0258-37-7301

ホームページ制作やSEOのお悩みはぜひ弊社へご相談ください