ローディングページ実装時、Androidスマホだけ上部に白枠が出る。

ローディングページとは

Webサイトの読込中に出力するページの事です。読込の進捗状況を表示したり、最初にキャッチフレーズを強制的に出力したりと、いろいろなパターンがあります。

弊社の制作事例で許可を頂いているお客様の事例など

(1)読込の進捗状況を表示したローディングページ

https://totalrepair-fkikaku.com/

(2)最初にキャッチフレーズを出力するローディングページ(トップページのみ)

https://www.njoy.jp/

今回は、(2)の時のローディングページを実装した際に、AndroidのスマホのChromeだけ上部に、なぜか大きな白枠が出る事象がありました。

発生した事象

該当のHTML文(ローディングページの部分)

以下をベースにローディングページを実装

①”loading”

• 幅と高さをブラウザのウィンドウサイズに設定(ウィンドウ一杯に広げる)。
• position:absolute;(絶対位置)で、top:0、left:0の位置へ配置。(画面全体)
• これを、紙芝居のように見せるため一定時間経過後に、left:100%へ動かす。(jsで一定時間経過後に、left:100%で非表示領域へ移動)
• 動かした後は、該当の箇所を削除(jsでleft:100%で非表示領域へ移動した後、さらに一定時間経過後にはloadingを削除(display:none;))

該当のCSS

該当のJS

setTimeout関数を使い、一定時間経過後に以下を実行する。(本筋ではないため、setTimeoutの記載は省略させてもらいます。JQueryを使用)

②”loading”の疑似要素before

• ブラウザのウィンドウサイズの幅に対して２倍、縦はウィンドウサイズの高さで設定(幅を2倍にする事で、演目のカーテンのように。)
• position:absolute(絶対位置)で、top:0、left:-200%の位置に配置(ウィンドウの外の左側の位置に配置)
• こちらも、演目(①の後に続くように)のように左から右へ背景を動かす。左の非表示領域から、右の非表示領域へ動かすため、一定時間経過後に、left:0へ動かす。(jsで一定時間経過後に、left:0で、左の非表示領域から右の非表示領域へ移動)

該当のCSS

該当のJS

疑似要素(before)に対する操作はできないため、activeクラスを増やす事で対応。activeクラスを増やすと前述のbeforeの疑似要素(※1)が実行される。

この時になぜかAndroidのスマホのChromeだけ上部に、大きな白枠(白いスペース)が出る事象がありました。

原因と対処

bodyに明示的に、position:relative;を指定していなかった事が原因。

親であるbodyにposition:relative;を設置したところ、不具合は解消されました。

もし、同じ事象に遭遇した方は、明示的に親にposition:relative;を指定して見て下さい。