この記事でわかる
- Safariでリロードすると表示されない
- jQueryで動作不良起こした時、どう調べたらいいのかわからない
WEBサイトのページ遷移時にさまざまなアニメーション効果を加えて表示するjQueryプラグイン「Animsition.js」。
フェードやフリップ,回転など多彩なアニメーションがあり、簡単に設定ができるので、WEBサイトにひと味加えたい時に使っています。
その便利なプラグインでもある「Animsition.js」でハマってしまいました。
それは「Safariでリロードすると表示されない!」という現象です。
ブラウザ違いの現象はハマるととても厄介ですよね。
その時にわかった原因と対処法を説明します。
【原因】「Animsition.js」をSafariでリロードするとなぜ表示されないのか
まずお客様から
という連絡を受けました。
よくある連絡ですね!詳しく聞きましょう。
という流れでた。
現象は、「Safariでリロードや前のページに戻ると表示されない」ということです。
確認すると、本当に表示されませんでした。
ではブラウザ違いのChromeではどうなのか、、、表示される!
SafariのjQuery動作が悪いのか、「Animsition Safari リロード」「Safari jQuery 動かない」などグーグル先生に聞いてみましたが、有効なページが見当たらず。
console.logでどこまで動いているか確認すると、Animsition.jsの中に入れていませんでした。
リロードするとAnimsition.jsの中に入れない、、ますますわからなくなってきました。
Safariに関係なくAnimsitionのエラーに関して調べてみました。
すると、「AnimsitionはjQuery3系でエラーがでる」というページが出てきたのです。
ファイルをみてみると、jQuery3系でのでjQuery1系に変更すると、、動きました!
いろいろ調べてみた結果、jQueryのバージョンが原因でした。
「Animsition.js」をSafariで正常にリロードさせる対処法
先ほどjQuery1系は動くことを確認できました。
ではjQuery2系(2.2.4)ではどうなのか気になって試してみると、動きませんでした。
ということで、jQuery3系をjQuery1系(1.12.4)に変更しました。
下のURLからjQuery1.12.4をダウンロードしてください。
https://blog.jquery.com/2016/05/20/jquery-1-12-4-and-2-2-4-released/