iPadのブラウザ｢だけ｣特定のhtml要素が表示されない状態の解消方法について

業務上の秘密等もあるので､細かい部分は､ぼかします。

同様な問題を検索されて検索で来られた方は､文脈から読み取っていただければと思います｡

タイトルの通りですが､ウェブサイトを作っていて､パソコンでもスマホでも表示されるにもかかわらず｢iPadでのみ｣ある要素が表示されない状態が生じました。

結論から書くと､特定の部分のhtmlコーディングに若干のミスがあり､構文が正しくない状態であったため､｢iPadのブラウザのみ｣｢表示されない｣エラーとなるのが原因でした｡

最初はCSSの設定が間違っているのかと思い修正を試みていたのですが､まさか同じIOS系のiPhoneとiPadでレンダリングの挙動が異なる､という結果には若干､驚きを得ました｡

ちなみにiPadでの問題の症状はSafari以外のブラウザでも生じていたので、｢特定の画面サイズで生じるのか?｣と考えていたのですが､よく考えるiPadでのブラウザのレンダリングエンジンはクローム系のv8ではなく､Appleが提供するWebKitなのですよね…。

そのWebKitが原因によるiPad共通でのバグ、と言うよりは融通のきかないレンダリングとでもいいましょうか｡
せめて､コーディングが｢おかしいなり｣に表示されればいいのですが､まさか｢全く表示されない｣状態になろうとは…｡

逆に､クローム系v8エンジンは｢ある程度｣のバグは許容するレンダリングなのでしょう｡これがデバッグ時にiPhone系とそれ以外のブラウザでの表示の差異の原因なのでしょうね｡エミュレータでのデバッグと実機でのデバッグでの差異あるある､です｡

業務に関することなので､詳細は書けませんが､普通のプレーンなhtmlであればデバッグ時には､おかしな挙動は問題なく把握できますが､動的なプログラムの場合､どうしてもおかしな部分が見えづらい､という状態になりやすいです｡

それに関しては積極的に実機での確認を行う､見やすいhtml構造の記述を心がける､などが対応策でしょうか｡

なかなか印象的な出来事であったので､備忘録として｡