こんにちわ。
久しぶりのブログ記事投稿、Ｎです。
最近ぼくは社内のシステムを開発していてブログはもっぱらＩさんが書いてくださってました。（Ｉさんブログ任せっぱなしで申し訳ありません）
今回、ブログ記事を執筆したのは表題の件でどうしても自分用メモがてら同じ状況に陥ってる制作者様への一助になればと思い書いた次第です。
前提となる状況
現在ぼくは社内でWordpress用の新しいテンプレートを開発しています。
WordPressのテンプレートでありながらテーマオプションでデザインが簡単にできたり、パララックス効果を入れたりとテンプレートに見えないテンプレートを作成しました。
もちろん上長のチェックを受け、各ブラウザチェックを行った上で完成までもっていきました。（細微に気になる点はありますが）
不具合が発覚した経緯
開発したテンプレートは２０１７年の春頃から開発に着手し、試行錯誤を重ねながら開発を進めていました。
１０月末日頃にβ版とでも呼ぶべきものが完成し、その後もテストを重ねて不備がある点は改善を加えていきました。
それまでは特にサイト制作と表示に問題はありませんでした。
が、ここで問題が登場することとなります。
２０１７年１１月３日に日本で発売されたiPhoneX。
当然ながら以前のブラウザチェックでMac上Safariでの表示確認やiPhone各バージョンのSafariでの確認は行っていただのでiPhoneXでも問題はないだろうと思っていました。
しかし、そうはいかなかった。
弊社社長が購入したiPhoneXで表示の確認を行うと、形容しがたい不具合が認められました。
あえて言葉にすると
・「レイアウトが崩れている、もしくはずれている」
・「下にスクロールしようとすると要素間に謎の空白がスクロール量によって生じる」
・「ただし上にスクロールするとその空白はなくなる」
といった不具合でした。
画像で表すと以下のような感じです。
遭遇したことのない不具合でびっくりしました。
様々なブラウザで確認を行いましたがこのような不具合が起こっているのはiPhoneX上のSafariで閲覧した時のみでした。同じiPhoneXでもLINEからサイトを開いた時などはそのような不具合はありませんでした。
最新の端末でしか生じてないのだから問題ないのでは、とも思いましたがiPhoneXの予約情報や流通量を考えるとこの不具合は無視するわけにはいきません。
そこで早急に原因の究明と不具合解消に望むことになりました。
今回の不具合の原因はviewport-fit=cover
結論から申し上げますと、今回iPhoneXのSafariでのみ発生した不具合の原因はviewport-fit=coverの存在でした。
viewport-fit=coverというのはiPhoneXのSafariでサイトを表示した際に生じる左右の空白箇所に対し、全画面でサイトを表示するというコード。
参考はこちらの記事で。
どういう因果関係なのかは不明ですが、iPhoneXでの表示のためにいれたviewport-fit=coverがiPhoneXのSafariで表示の不具合を起こしていました。
タグ内からviewport-fit=coverの箇所を削除することによって表示はすんなり解決されました。
終わりに
今回のiPhoneXのSafariでの不具合には肝を冷やしましたが無事解決できてよかったです。（iPhoneXでのウェブサイト制作に関する情報はviewport-fit=coverの表示領域の件くらいしかGoogleでも出てこず…）
最新の情報をサイトに導入するのはもちろんいいのですが、比較的新しいコードを導入する際にはよく確認してから導入しましょうという良い教訓になりました。
パララックス効果やjavascriptで動きを付けたりしているサイトをiPhoneXのSafariで閲覧した時にみたこともない不具合が見られる場合、今回のようにiPhoneXのためのコードを疑ってみるとスピーディーに解決できるかもしれません。
ウェブ制作に関わる様々な方の助けになれば幸いです。
