Viewport size change during Puppeteer screenshot capture

Other Questions Puppeteer
1

I’m having trouble with Puppeteer when taking screenshots. I’m using headless:false mode and noticed something weird. Right when it takes a screenshot, the viewport gets smaller for a split second. Then it goes back to normal size until the next screenshot.

Here’s what my setup looks like:

const browser = await puppeteer.launch({
  args: ['--no-site-isolation'],
  ignoreDefaultArgs: ['--hide-scrollbars'],
  headless: false
});

await page.setViewport({
  width: 1200,
  height: 800,
  deviceScaleFactor: 1
});

await page.screenshot({
  encoding: 'base64',
  captureBeyondViewport: false
});

I’ve tried this with Puppeteer versions 6.0.0, 9.0.0, and 10.0.0. The viewport still flickers in all of them. I thought setting captureBeyondViewport: false would fix it, but it didn’t help.

Am I doing something wrong? Or is this just how Puppeteer works? Any ideas on how to stop the viewport from changing size during screenshots?

2

i’ve run into this too. super annoying! have u tried adding a delay before taking the screenshot? somethin like:

await page.waitForTimeout(100);
await page.screenshot({…});

might give the viewport time to settle. also, check if any scripts or css are messing with the page size. sometimes thats the culprit. good luck!

3

I’ve dealt with similar viewport issues in Puppeteer, and it can be frustrating. One thing that worked for me was forcing a redraw of the page before taking the screenshot. Here’s what I did:

await page.evaluate(() => {
document.body.style.zoom = 1.01;
document.body.style.zoom = 1;
});

await page.screenshot({ encoding: ‘base64’ });

This trick seems to stabilize the viewport. I think it’s because it forces the browser to recalculate layout, which somehow prevents that weird size flicker.

Another thing to check is if you have any CSS transitions or animations running. Those can sometimes mess with screenshots. Try disabling them temporarily if you have any.

If all else fails, you might want to look into using a different screenshot method altogether. I’ve had good luck with html2canvas in some cases where Puppeteer was giving me trouble. It’s not a drop-in replacement, but it might be worth exploring if you can’t get Puppeteer to behave.

4

I’ve encountered a similar issue with Puppeteer screenshots. One workaround that helped me was using the ‘clip’ option instead of relying on the viewport settings. Here’s what I did:

const clip = await page.evaluate(() => {
  const element = document.documentElement;
  return {
    x: 0,
    y: 0,
    width: element.clientWidth,
    height: element.clientHeight
  };
});

await page.screenshot({
  clip: clip,
  encoding: 'base64'
});

This approach captures the exact dimensions of the page content, bypassing any viewport size changes. It’s not a perfect solution, but it might help stabilize your screenshots. Also, ensure you’re not running any animations or transitions on the page during capture, as these can sometimes interfere with screenshot stability.