jQuery コーディング

「Animsition.js」Safariでリロードすると表示されない時の対処法

2021年2月24日

rick

rick

技術がないから、人脈がないからと一歩踏み出せないフリーランス・独立したい人向けのサイトを目指しています。
新卒で未経験でプログラマ→サッカースクールの運営補助→ホームページ制作→子供ができ独立
「プログラミング」「学習法」「独立・フリーランス」についての記事を公開しています。

この記事でわかる

  • Safariでリロードすると表示されない
  • jQueryで動作不良起こした時、どう調べたらいいのかわからない

WEBサイトのページ遷移時にさまざまなアニメーション効果を加えて表示するjQueryプラグイン「Animsition.js」

フェードやフリップ,回転など多彩なアニメーションがあり、簡単に設定ができるので、WEBサイトにひと味加えたい時に使っています。

その便利なプラグインでもある「Animsition.js」でハマってしまいました。

それは「Safariでリロードすると表示されない!」という現象です。

ブラウザ違いの現象はハマるととても厄介ですよね。

その時にわかった原因と対処法を説明します。

 

【原因】「Animsition.js」をSafariでリロードするとなぜ表示されないのか

まずお客様から

ねこくん
WEBサイトの画面が表示されない

という連絡を受けました。

よくある連絡ですね!詳しく聞きましょう。

どのブラウザでどうすると表示されないですか?
りく
ねこくん
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/

 

  • この記事を書いた人
rick

rick

技術がないから、人脈がないからと一歩踏み出せないフリーランス・独立したい人向けのサイトを目指しています。
新卒で未経験でプログラマ→サッカースクールの運営補助→ホームページ制作→子供ができ独立
「プログラミング」「学習法」「独立・フリーランス」についての記事を公開しています。

-jQuery, コーディング

© 2022 rickblog | フリーランス・Webに役立つ情報サイト