Chromeでスライドショーが表示されず:WEB制作でドツボにはまった話し

Chromeでスライドショーが表示されず:WEB制作でドツボにはまった話し

今、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」を使おうと思ってます。

検証用ブラウザと普通に用いるブラウザは分けることにしました。

 

ken
久々のドツボでした。