ホームページの一部が、iPhoneでだけ真っ白｜原因はSafariの「気が散る項目を非表示」でした

「ホームページの一部が、スマホで見ると真っ白になっている」。会社のホームページを持っていると、こういう指摘を受けることがあります。作った側としては、まずサイトの作りを疑います。私もそうでした。

ところが今回は、ホームページには何の問題もありませんでした。原因は、見ていたiPhoneのSafari（iPhone標準のブラウザー）が覚えていた「この部分は表示しない」という設定でした。サイトをいくら直しても変わらなかった理由と、見分け方を書いておきます。

何が起きたか

私が更新を担当しているあるホームページで、トップページの一区画だけが、iPhoneのSafariで真っ白に表示されるという連絡がありました。背景に写真を敷いて、その上に白い文字を載せた区画です。

• その区画だけ、文字も背景写真も見えない
• 区画の高さ分の空白はそのまま残っている
• その下にある予定表やバナーは普通に表示される
• パソコンや、ほかの端末では起きない
• 再読み込みしても変わらない

「区画は存在するのに中身だけ見えない」という見え方なので、写真が読み込めていないか、スマホ向けの見た目の指定がおかしいのだろう、と考えました。

疑ったこと、そして外れたこと

原因を突き止めるまでに、いくつかの仮説を立てて一つずつ確かめました。結果的に、サイト側の仮説はすべて外れています。

疑ったこと	確かめた方法	結果
サーバーが古い内容を返している	スマホのふりをして中身を取り寄せ、最新の内容が返るか確認	最新の内容が正常に返っていた
背景写真が壊れている	同じiPhoneで写真のファイルを直接開く	写真は表示された
背景を固定する指定にiPhoneが対応していない	その指定を外して確認	変化なし
見た目の指定ファイルが古いまま残っている	読み込み先の名前に目印を付けて、新しく読み直させる	変化なし
見た目の指定そのものがおかしい	同じ指定だけを抜き出した確認用ページを別の場所に置く	7通りすべて正常に表示

なお、背景を固定する指定は、iPhoneでは表示が不安定になりやすいことが知られています。今回の原因ではありませんでしたが、外したままにしています。害がなく、念のための対策として意味があるからです。

決め手は「複製なら正常」「プライベートなら正常」

行き詰まったので、やり方を変えました。本物のページを丸ごと複製して、別の場所に置いたのです。複製には、各区画が実際にどう表示されているかを測る仕掛けを付けました。

同じiPhoneで複製を開いてもらうと、問題の区画が正常に表示されました。測った値にも異常はありません。中身はまったく同じなのに、置き場所が違うだけで表示が変わる。これで、原因はページの中身ではないと分かりました。

最後に、同じiPhoneのSafariでプライベートタブ（閲覧の記録を残さないモード）を開き、本物のページを見てもらいました。結果は正常表示。通常のタブで、しかもそのホームページを開いたときだけ起きる、ということがはっきりしました。

原因｜Safariの「気が散る項目を非表示」

iPhoneのSafariには、「気が散る項目を非表示」という機能があります。ページの中の広告や邪魔な部分を指でなぞるように選ぶと、その部分を隠してくれる機能です。そして、隠した部分をサイトごとに覚えておきます。

今回は、以前どこかの操作でこの機能が働き、問題の区画が「隠す部分」として記憶されていました。だから、

• ほかの端末やパソコンでは正常（記憶はそのiPhoneの中だけにある）
• 別の場所に置いた複製では正常（記憶は元のサイトに対してだけ働く）
• プライベートタブでは正常（プライベートタブではその記憶が使われない）
• サイトをいくら直しても変わらない（サイト側の問題ではない）

という、一見ばらばらな結果が、すべて説明できます。区画の高さ分の空白が残っていたのも、中身だけが隠されていたからです。

直し方

1. そのホームページを通常のタブで開く：プライベートタブではなく、普段のタブで開きます。
2. アドレスバーのページメニューを開く：アドレスバーの横にあるメニューのボタンをタップします。
3. 「非表示にした項目を表示」をタップする：これで隠されていた部分が元に戻ります。
4. メニューに見当たらない場合は、サイトのデータを消す：iPhoneの「設定」→「アプリ」→「Safari」→「詳細」→「Webサイトデータ」と進み、そのホームページの名前で検索して、左にスワイプして削除します。そのあとSafariで開き直します。

4の方法では、そのサイトに保存されていたログイン状態なども消えることがあります。会員ページのあるサイトで試すときは、IDとパスワードが手元にあるか先に確認してください。

同じことで時間を使わないために

3つそろったら、端末を先に疑う

今回いちばんの反省は、サイトを直そうとして時間を使ったことです。次の3つがそろったら、サイトを触る前に、見ている端末のSafariの記憶を疑ってください。

サイン	意味すること
一部の区画だけが白い・空白のまま	ページ全体ではなく、特定の部分だけが隠れている
特定の端末でだけ起きる	原因はサイトではなく、その端末の中にある
プライベートタブだと正常	端末に保存された、サイトごとの記憶が関わっている

指摘をくれた方に「プライベートタブで開くとどうですか」と聞くだけで、かなりの部分が切り分けられます。

パソコン上の確認だけでは再現しないことがある

ホームページを作る側は、パソコン上でiPhoneの表示をまねる道具を使って確認することが多いです。ただ、今回のような端末の中の記憶は、その道具では再現できません。スマホでの表示の不具合は、実際の端末で、複製ページや測る仕掛けを見てもらうほうが早く片付くことがあります。

切り分けに使った確認用ページは、必ず片付ける

今回は、検証用のサーバーに確認用のページと複製を置きました。原因が分かったあと、これらはすべて削除しています。本物そっくりの複製を置きっぱなしにすると、検索に出てしまったり、どれが本物か分からなくなったりします。調べるために作ったものは、終わったら消すまでが作業です。

会社のホームページを持つときに最初に決めておきたいことは会社のホームページを持つとき、最初に決める3つにまとめています。「表示がおかしい」と言われたときに誰が見るのかも、そのひとつです。また、スマホやパソコンの画面に出る表示を、すぐに「故障」や「サイトの不具合」と決めつけないという点では、PDFが開けずエラーが何度も出た記事とも共通しています。

指摘をくれた方への説明

説明は、次のようにしました。「お使いのiPhoneのSafariには、『このサイトのこの部分は表示しない』という設定を覚えておく機能があります。以前どこかの操作でこの機能が働き、その部分だけが隠れた状態で記憶されていました。ホームページ自体には問題がなく、ほかの方のスマホやパソコンでは正常に見えています。Safariのメニューから『非表示にした項目を表示』を選ぶか、Safariのこのサイトのデータを削除すると元に戻ります」。

まとめ

• iPhoneのSafariには、ページの一部を隠してサイトごとに覚える「気が散る項目を非表示」がある
• 「一部だけ白い」「その端末だけ」「プライベートタブなら正常」がそろったら、サイトより先に端末を疑う
• 直し方は、ページメニューの「非表示にした項目を表示」。なければWebサイトデータの削除
• 原因が分からないときは、本物を複製して別の場所で比べると、中身の問題かどうかを切り分けられる
• 確認のために作ったページは、終わったら必ず消す