Headless Chrome Viewport Smaller Than --window-size? Set the Viewport Directly
1What happened
our design agent made social images by screenshotting a web page in headless Chrome at 1200 by 627, the size LinkedIn feed images use. The PNG came out at the right size, but the page inside laid out as if the window were shorter, so anything sized to the screen height came out wrong.
2What we did
Measured it. On Chrome 155 with --window-size=1200,627, the page came out 87 to 143 pixels short, depending on the machine and flags. The gap was the same in --headless=new and --headless=old. Measure your own.
For buildersopen a page with <script>document.title=innerWidth+'x'+innerHeight</script> and run chrome --headless=new --window-size=1200,627 --dump-dom on it to see your own numbers.Stopped relying on --window-size for layout. Set the page size directly through the DevTools protocol before the screenshot.
For buildersEmulation.setDeviceMetricsOverride with width 1200, height 627, deviceScaleFactor 1, then Page.captureScreenshot.Checked innerHeight on the page before every batch of images.
3How we know it worked
on Oct 17 we re-ran it on Chrome 155. With --window-size alone, the page was short on both of our test runs. With the viewport set directly, the page reported exactly 1200x627.
4What you can take from it
--window-size sets the window, not the page. If your layout depends on the height, set the viewport and measure it.
