iOS/iPadOS 13のSafariでページ全体や一部がレンダリングされない問題に対するワークアラウンド
背景
業務でWebアプリを開発しているのですが、iPadOS 13のSafariにて以下のような事象が発生しました
- ページ全体が真っ白になる
- ページの一部が欠ける
- 真っ白になったり、一部が欠けたりしたときにWebインスペクタを使うとDOM自体は存在している
- 画面をタップ、スクロールするとレンダリングされる
iOS 13 Safari Not Rendering などで調べてみるといくつかスレッドが上がっていました
しかし、問題解決までには至っていないようでした
Safari on iOS 13.1.2 Not Rendering Correc… - Apple Community
https://discussions.apple.com/thread/250673539
Webアプリを使う人にとっては単純に「Webアプリが使えない」と思ってしまうので、あまりやりたくないですがワークアラウンドを考えてみました
対策
初期表示にスクロールさせてレンダリングされるようにしました
画面をタップ、スクロールするとレンダリングされる
という事象から、アプリ側で強制的にスクロールさせました
Safari側で対応してくれればいいのですが…
擬似コード
レンダリングが終わった = function () { // y軸方向に1pxずらす setTimeout(function () { window.scrollTo(0, 1); }, 100); // 1pxずらしたので戻す setTimeout(function () { window.scrollTo(0, 0); }, 200); }