今、ECサイトを作っているのですが、そこでちょっとした制作上の問題が生じて、久々にドツボにハマってしまいました。
同様のケースに遭遇する人もいるかと思うので、今後の教訓も含めて書いておきます。
スライドショーが表示されず
このECサイトは、トップページに背景画像のスライドショーを実装しています。
jQueryプラグイン「BgSwitcher」を用いて背景画像を切り替えます。
＊指定した要素の背景画像をスライドショーにすることができるjQueryプラグイン「BgSwitcher」
実装自体は手間もかからず完了したのですが、なぜかChromeで見るとスライドショーが表示されません。
FirefoxでもIE11やEdgeでも問題無いのに、Chromeでは背景画像そのものが表示されません。
ああでも無い、こうでも無いと試行錯誤したあげく、これの原因究明までに半日を費やしました。
万策尽きかけました
まず、WEBデザイナーの通弊として、コードに問題があるのだろうと思いました。
HTML・CSS・JSをいじったり、記述間違いがあるのかと何度も確認しました。
しかし、状況は変化せず。
IEで表示されないというなら分かるけど、Chromeで非表示とはどういうことなんだろう？
ググって同様の事例を探してみましたが、原因がさっぱり分かりません。
・・・もはや万策尽きたか？
「BgSwitcher」以外のプラグインに切り替えようかなとも考えました。
ふと思い立って、Chromeと描画エンジンが同じChromium系ブラウザの「Vivaldi」や「Kinza」でページを見てみました。
すると背景画像は問題なく表示されます。
スライドショーも滑らかに動いてます。
んん？？？ これはどういうことだ？
試しにサブで使っているノートパソコンのChromeで開くと、こちらは問題なく表示されてます。
ということは・・・
これはブラウザの拡張機能の問題じゃないかと思いついて、機能を全て停止させて開いてみると、なんとバッチリ表示されました。
インストールした拡張機能の何かが悪さをしていたようです。
なんかね・・脱力しましたよ (^_^;)
ここ至るまで半日費やしました。
自分のブラウザ環境の問題だったとは盲点でしたね。
今後の教訓として
今後の教訓として、Chromeは拡張機能を全て外して、WEBサイトの検証専用に用います。
代わりに一般的な用途には、Chromeの代わりに「Vivaldi」を使おうと思ってます。
検証用ブラウザと普通に用いるブラウザは分けることにしました。
