AndroidアプリのWebViewでChatGPTを表示する実験をしていたところ、ページの読み込みは完了しているのに、エミュレーターの画面には何も表示されない現象に遭遇しました。
ログを見ると START → FINISH まで正常に進み、JavaScriptからページタイトルや本文も取得できていました。つまりWebページそのものは読み込まれています。
最初に疑ったこと
最初はWebViewのバージョンを疑い、Android System WebViewを124系からDev 155へ変更しました。しかし症状は変わりませんでした。LogcatにはEGLやrendernode周辺の警告も出ていましたが、この時点では原因を特定できませんでした。
次にJavaScriptから赤い固定要素を強制的に追加してみると、これは正常に画面へ表示されました。
つまり「WebViewがまったく描画できない」という単純な故障ではありません。
ChatGPT本体だけ高さ0
さらに調べると、ChatGPTの html、body、main は幅を持っているのに高さが0でした。一方、WebViewのviewportは約914pxあり正常です。height:100vh !important を設定しても計算後の高さは0のまま。
この段階ではChatGPT側のCSSやレイアウト処理をかなり疑いました。
決定打はYouTubeとDevTools
ところが比較用にYouTubeを開いてみても、エミュレーターでは黒画面。
さらにPCのChromeからWebViewをリモートデバッグすると、DevTools上ではYouTubeが正常に描画されていました。
ここで、WebページやCSSより後段の「エミュレーターの描画経路」が怪しくなりました。
Vulkanを無効化して起動
Android EmulatorをVulkan無効で起動してみます。
& "C:\Users\○○○\AppData\Local\Android\Sdk\emulator\emulator.exe" -avd Pixel_8 -feature -VulkanするとYouTubeが正常に表示され、操作もできるようになりました。
そのまま同じエミュレーターでChatGPTへ戻すと、ChatGPTも正常表示。
今回の環境では、Android EmulatorのVulkan系描画経路がWebViewの表示不良の主因だったと判断しました。
今回の教訓
WebViewが真っ黒・真っ白でも、DevToolsでは正常に描画されているという場合は、CSSやJavaScriptを深掘りする前に、エミュレーターのGPU/Vulkan描画経路も疑う価値があります。
特に今回のように、別サイトでも同じ症状が出るなら、サイト固有の問題ではない可能性が高くなります。
何時間もCSSを追いかける前に、この情報を知りたかった。
時間は有限です。
同じ症状で困っている誰かの時間が少しでも減れば幸いです。
コメントをどうぞ