【WSL2】codegenやVSCodeからGUIツールが正常に表示されない問題の対処メモ

概要

WSL2環境でplaywrightのcodegenコマンドやVSCodeの拡張機能からGUIツールを立ち上げた際、 ウィンドウの枠だけが表示されて中身が透明になる現象に遭遇しました。
本記事では、私が実施した対処方法と参考になった情報をまとめます。

原因

少し調べたところ、この現象（WSL2上でGUIアプリのウィンドウ枠だけが表示され、中身が透明になる）は、WSL2のGPUサポート機能（gpuSupport）が有効な状態で、ChromiumベースのGUIアプリケーションを起動した際に、GPUアクセラレーションの互換性の問題が発生することが主な原因なようです。

対応内容

① .wslconfigファイルの編集

C:\Users\{ユーザー名}\直下に.wslconfigファイルを作成し、以下の内容を記載します。
※code コマンドはVSCodeを呼び出すコマンドです。VSCodeを入れていない場合はviコマンド等適切なコマンドでファイルを作成・編集してください。

$ cd ~
$ code ./.wslconfig

.wslconfigの内容：

[wsl2]
# https://github.com/microsoft/playwright/issues/21813
gpuSupport=false

② Ubuntuの再起動

$ wsl -l
Linux 用 Windows サブシステム ディストリビューション:
docker-desktop (既定)
Ubuntu-22.04

$ wsl -t Ubuntu-22.04
この操作を正しく終了しました。

$ wsl --shutdown
$ wsl

再起動後、.wslconfigの内容を再確認。

$ cat ./.wslconfig
[wsl2]
# https://github.com/microsoft/playwright/issues/21813
gpuSupport=false

まとめ

WSL2でGUIアプリの表示が崩れる場合、.wslconfigでgpuSupport=falseを設定することで改善するケースがあるようです。
本記事が何かのお役に立てば幸いです。

参考

★同様の事象と対応策について
https://stackoverflow.com/questions/74560608/only-chromiums-border-is-visible-while-running-test-in-playwright/78759159#78759159
https://github.com/microsoft/WSL/issues/8931
https://github.com/microsoft/playwright/issues/21813
★wslconfigについて
https://learn.microsoft.com/ja-jp/windows/wsl/wsl-config