Instagramアプリから公式サイトにアクセスしたら、
なぜか画面が真っ黒。動画の読み込み待ちのような表示のまま何も進まない。
Safariで開くと問題なし、リロードすると直ることもある。
しかも発生するのはiPhoneのみ。
原因を探しても情報はほとんど出てこず、
動画やYouTube埋め込みを消しても解決しない——
最終的に原因だったのは、
全ページで読み込まれていた common.js 内の「modernizr」でした。
同じように困っている人の参考になればと思い、実際の調査過程と対応策をまとめます。
影響範囲と条件（iPhoneのみ／全ページ）
確認できた条件は以下の通りです。
- 発生するのは iPhoneのみ
- Instagramアプリ内ブラウザで開いた場合のみ発生
- Safariなど通常のブラウザでは発生しない
- トップページだけでなく 全ページで発生
すべてのiPhone機種での再現確認までは取れていませんが、
少なくとも複数端末で同様の症状が確認できました。
最初に疑った原因（動画・YouTube・JS）
黒画面＝動画関連のトラブルを疑い、
まずは以下のような要素を確認・削除していきました。
- YouTubeの埋め込み
- 動画に関連するJavaScript
- 自動再生を行っていそうな処理
しかし、動画と判断されそうな要素をすべて削除しても症状は改善せず。
原因は別のところにありそうだと判断しました。
Safari・Chromeで開くと発生しなかった
Instagramアプリ内ブラウザで表示されたURLを
SafariやChromeで直接開いてみると、問題なく表示されることが分かりました。
このことから、
- サイト自体が壊れているわけではない
- Instagramアプリ内ブラウザ特有の問題である可能性が高い
と切り分けることができました。
最終的に原因だったもの（common.js 内の modernizr）
調査を進めた結果、
全ページで読み込まれている common.js 内の modernizr の記述が
原因であることが分かりました。
modernizr は古いブラウザ対応などのためによく使われていたライブラリですが、
このサイトは制作からかなり年数が経っており、
現在の環境やInstagramアプリ内ブラウザとの相性が悪かったようです。
該当の記述を外すと、
Instagramアプリ内ブラウザでも黒画面は発生しなくなりました。
modernizrを削除できなかった理由
ただし、問題はそれで終わりではありませんでした。
modernizr を削除すると、
- スライダーが正しく動かない
- 一部の表示や挙動が崩れる
といった別の不具合が発生してしまいました。
このサイトは、2017年に制作されたもので、
当時の実装に依存している部分が多く、
簡単にライブラリを置き換えることができない状態でした。
最終的に取った対応策（Instagram用ページを作成）
検討の結果、
Instagramからアクセスされた場合のみ表示する専用ページを作成
という対応を取りました。
- Instagramアプリ内ブラウザでは問題のある処理を避ける
- Safariや通常ブラウザでは従来通りのページを表示
という形で切り分けることで、
致命的な表示不具合は回避できました。
Safariへリダイレクトできなかった理由
Instagramアプリ内ブラウザから
Safariへ直接リダイレクトできれば理想的でしたが、
- アプリ側の仕様
- ユーザー操作を伴わないブラウザ切り替え制限
といった理由から、
自動的にSafariへ飛ばす方法は現実的ではありませんでした。
そのため、今回はリダイレクト案は断念しています。
同じ現象で困っている人へ
今回のように、
- Instagramアプリ内ブラウザのみ黒画面になる
- Safariでは問題ない
- 動画を消しても解決しない
という場合、
**共通JSや古いライブラリ（modernizrなど）**が原因になっている可能性があります。
検索しても情報が少ないトラブルですが、
同じように悩んでいる方のヒントになれば幸いです。
コメント