Webデザインで画面読み込み後に画面の右側が一瞬開く件

ある日、このブログをスマホで見ると、一度読みこまれた後に画面の右側が一瞬開きすぐもどるという現象が起こりました。

レイアウトやデザインの変更をしていないのでおかしいと思い、いろいろ調べたら原因が分かりましたので紹介します。

現象

例えばトップページを開いてみると、一度このようにちゃんと表示される。

その後一瞬画面の右側にスペースができる。

できたスペースはすぐになくなり元の表示に戻る。

ちょっとしたことだが、画面のガクつきは見ていて不快だったので原因を探し対策することに。

原因

CSSはいじっていないので外部から読込しているものが悪さをしていると予想。

Google adsenseを外してみるが変わらない。

Twitterのツイートを表示させるプラグインを外してみたところビンゴ！

画面の右側にスペースが表示されることなくページが表示された。

恐らくTwitterのウィジェットを読み込んだ時に画面以上の幅が読み込まれ、その後画面サイズにフィットするので今回の現象が起こるのかな？

自分のツイートを表示するメリットがほとんど感じられないのでTwitterウィジェットは外すことにした。

おわりに

外部サイトから読み込むウィジェットやブログパーツはとても便利ですが、サービス元の仕様変更で今回のようにいきなり表示が崩れてしまうことはあります。

自分が行った作業をしっかり理解し、それをいじっていないのに表示が崩れたら外部から読み込んでいるモノが悪さをしている可能性があります。
こまめな表示確認は必要ですね。