ブログBlog

ローディングページ実装時、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倍、縦はウィンドウサイズの高さで設定(幅を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;を指定して見て下さい。

 

WEB DESIGN

RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。

「全てお任せ!ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。

運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。

しかもなんと、「全てお任せ!ホームページ制作」は、¥99,800!で提供しております。

本業が忙しい中小企業様に大変ご好評を頂いている商品です。

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

  • レスポンシブルデザイン

    レスポンシブルデザイン
    (*1)

  • 検索エンジン最適化(SEO対策)

    検索エンジン最適化
    (SEO対策)

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU