Android EmulatorのWebViewが真っ黒・真っ白なのにDevToolsでは正常表示された話｜原因はVulkanだった

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を追いかける前に、この情報を知りたかった。

時間は有限です。

同じ症状で困っている誰かの時間が少しでも減れば幸いです。