I am new to puppeteer, so forgive if this is a noob mistake.

puppeteer versions: 6.0.0 / 9.0.0 / 10.0.0

I am taking a page.screenshot with puppeteer in headless:false mode. For a flicker of a second the viewport seems to resize (gets almost half as small) in the moment it takes the screenshot, and then we are back to full size until the next screenshot.

These are my relevant code bits:

const browser = await puppeteer.launch({
        args: ['--disable-features=site-per-process'],
        ignoreDefaultArgs: ["--hide-scrollbars"],
        headless: false
    });
...

await page.setViewport({
        width: 1000,
        height: 500,
        deviceScaleFactor: 1
    });
...

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

I have found this issue online, which they claim to have fixed though if you set captureBeyondViewport: false :

I have tested with three different version of puppeteer (see above). The flickering behavior happens everywhere. Is there something I am doing wrong here?

I am new to puppeteer, so forgive if this is a noob mistake.

puppeteer versions: 6.0.0 / 9.0.0 / 10.0.0

I am taking a page.screenshot with puppeteer in headless:false mode. For a flicker of a second the viewport seems to resize (gets almost half as small) in the moment it takes the screenshot, and then we are back to full size until the next screenshot.

These are my relevant code bits:

const browser = await puppeteer.launch({
        args: ['--disable-features=site-per-process'],
        ignoreDefaultArgs: ["--hide-scrollbars"],
        headless: false
    });
...

await page.setViewport({
        width: 1000,
        height: 500,
        deviceScaleFactor: 1
    });
...

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

I have found this issue online, which they claim to have fixed though if you set captureBeyondViewport: false : https://github./puppeteer/puppeteer/issues/7043

I have tested with three different version of puppeteer (see above). The flickering behavior happens everywhere. Is there something I am doing wrong here?

• javascript
• puppeteer

• 1 Hey, I've just came across this behavior myself, thus finding you question. Were you able to solve this issue? – Vaviloff Commented Aug 11, 2021 at 14:40
• Unfortunately not – user3293924 Commented Oct 1, 2021 at 14:41
• Same here. I'll post an answer if I ever find a solution... – Silas Commented Jan 24, 2022 at 15:39
• I have fullPage: true and captureBeyondViewport: false and it doesn't flicker and resize before the screenshot – Ryan Detzel Commented Feb 26, 2022 at 16:47

2 Answers 2

For me, the resizing only stopped when I set both captureBeyondViewport: false in page.screenshot and defaultViewport: null in puppeteer.launch

Here's full code without any screenshot resizing:

const puppeteer = require('puppeteer');

const wait = (time) => new Promise(function (resolve) { setTimeout(resolve, time) });

(async () => {
  const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox'], headless: false, defaultViewport: null});
  const page = await browser.newPage();
  await page.goto('https://en.wikipedia/wiki/Albert_Einstein');
  await page.screenshot({path: 'screenshot.png', captureBeyondViewport: false});
  
  await wait(2000)
  await browser.close();
})();

It's well known issue when you capture full page screenshot using puppeteer. As of now, the solution for that is using a third party library to capture full page screenshot: https://github./morteza-fsh/puppeteer-full-page-screenshot

The usage is pretty similar with using puppeteer itself, but instead of using puppeteer.screenshot to capture full page once, it capture multiple images while scrolling and then merge all captured images into one image. By doing that, there's no trigger to window.onresize event.

import puppeteer from 'puppeteer';
import fullPageScreenshot from 'puppeteer-full-page-screenshot';

(async () => {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
   await page.setViewport({ width: 1920, height: 1080 });
   await page.goto('http://example./');

   await fullPageScreenshot(page, { path: './page.png' });

   await browser.close();
})();