パララクスがIEでガタつく(解決済み)

今回、クライアント様から「サイトはパララックスにしたい!」との熱い要望を受け、恥ずかしながらのパララックスコーディング初体験をしました。個人的な足跡を残すため、だらだらと書きます。

 

いろいろ迷った結果”parallax.min.js”を導入しました。すごくシンプルでいい感じに仕上がったと思ったら・・・。

出たよ。伝家の宝刀、IE独自のバグ。

パララックスのところまでスクロールするとガタガタと上下に揺れる。さらっと調べると原因としてはIE独自の「少しづつ読み込みます」が原因のようで、オプションの「スムーズスクロール」が悪さをしているらしい。

 

ためしに解除してみると、解決・・・ってダメじゃん!ユーザーだよりの解決は解決になってない!ということで、解決方法を探すことにします。

スムーズスクロールさえ切ってしまえばいいということは、そういう疑似環境を作ってしまうJSを書いてくれている聖人がいらっしゃるのではないかと思い検索してみるといらっしゃいました。しかし、今回の案件には通用ぜず。残念。一応、解決する方もいらっしゃるかもしれませんので、URLを貼っておきます。

 

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

 

探せど探せど、解決案が見つからない中、まてよと。読み込みが遅くてカクつくなら、少し、もたつかせればいいんじゃね?ということに気づき、そんなJSプラグインを検索。するとありました。それがこちら。

余韻を残してスクロールするようにするjQueryプラグイン-NiceScroll

ぬるふわっとスクロールしてくれるようになるJS。こちらの導入で僕の場合は解決しました。

いやー今回は久しぶりにはまって、丸1日解決方法に時間を取られてしまいました。同じバグに悩んでいる方のご参考になれば幸いです。

 

あっ!parallax.min.jsを解説してくれている方のページも貼っておきますね。

シンプルなパララックスプラグインParallax.jsを試してみる

 

 

alusoconyのTOPへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です