Fullscreen APIの落とし穴——意図しないDOM要素が全画面に含まれる問題

Fullscreen APIを使ったWebアプリ開発で、見落としがちな問題があります。Element.requestFullscreen() で特定のコンテナを全画面にした際、そのコンテナ内に含まれるすべてのDOM要素が全画面表示の対象になるということです。

よくあるケース

たとえば、ゲームのコンテナに全画面を適用する場合。開発中にデバッグ用のリンクやログ出力用の要素をコンテナ内に置いていると、全画面に切り替えたとき、それらが一緒に表示されてしまいます。

// ゲームコンテナに全画面を適用
const container = document.getElementById('game-container');
container.requestFullscreen();

// container内にデバッグ用リンクがあると
// 全画面時にそのまま見えてしまう

通常モードでは display: none や visibility: hidden で隠していても、CSSの :fullscreen 疑似クラスの適用優先度によっては、全画面時だけ表示されてしまうことがあります。

対処法

いくつかのアプローチがあります。

1. 全画面対象のコンテナを分離する

デバッグ要素をコンテナの外に出す方法。最もシンプルです。

2. :fullscreen疑似クラスで明示的に非表示にする

#game-container:fullscreen .debug-link {
  display: none !important;
}

3. ビルド時にデバッグ要素を除去する

本番ビルドでデバッグ用DOM要素をstrip処理するのが理想ですが、ビルドツールを使わない構成（素のHTML/JS）だと忘れがちです。

まとめ

Fullscreen APIは手軽に使える一方で、「何が全画面に含まれるか」を意識しないと、意図しない情報がユーザーに見えてしまうリスクがあります。特にソースコードへの参照リンクや内部パスが露出するケースは、セキュリティ上も好ましくありません。

デプロイ前に一度、全画面モードで実際の表示を確認することをおすすめします。