Chrome Headless の --screenshot で画面下部に白い余白が出る問題と対処法
問題 Chrome の Headless モードで HTML を PNG 画像にキャプチャする際、画面下部に**白い余白（白帯）**が発生することがあります。 google-chrome --headless --screenshot=output.png \ --window-size=1920,1080 \ --hide-scrollbars \ --force-device-scale-factor=1 \ file:///path/to/slide.html HTML 側で width: 1920px; height: 1080px を指定しているにもかかわらず、生成された画像の下部に白い帯が残り、bottom で配置した要素（テロップ、フッターなど）が切れてしまいます。 原因 --window-size=1920,1080 はブラウザの外部ウィンドウサイズを指定するオプションであり、実際の**ビューポート（描画領域）**は若干小さくなります。Headless モードでもこのズレは発生します。 つまり： --window-size=1920,1080 → 実際のビューポートは約 1920×1058 程度 HTML は 1080px の高さで描画しようとする ビューポートに収まらない下部のコンテンツが見切れる スクリーンショットは 1920×1080 で出力されるが、下部はデフォルト背景色（白）で埋まる html や body に height: 1080px を指定しても、Chrome が実際に確保するビューポート高さとは一致しないため、CSS だけでは解決できません。 解決方法 ウィンドウサイズを大きめに設定し、スクリーンショット後に Pillow でクロップするのが最も確実です。 1. Chrome のウィンドウサイズを大きくする google-chrome --headless --screenshot=output.png \ --window-size=1920,1280 \ --hide-scrollbars \ --force-device-scale-factor=1 \ file:///path/to/slide.html 高さを 1280 に変更することで、1080px のコンテンツが確実にビューポート内に収まります。 ...
