Puppeteer New Headless causing the video to zoom in

[aamirv1]

• I am submitting a bug report

• Summary
  Puppeteer new headless is causing the video to be exported as zoomed in despite defining proper dimensions.
  I am attaching code snippet for both old and new headless along with the video exported with each of code to be able to recreate the issue.

Code and Video with old Headless

"use strict";

const puppeteer = require("puppeteer");
const { PuppeteerScreenRecorder } = require("puppeteer-screen-recorder");
const util = require("util");
const exec = util.promisify(require("child_process").exec);

(async () => {
  const browser = await puppeteer.launch();
  try {
    const page = await browser.newPage();
    await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 });

    const recorder = new PuppeteerScreenRecorder(page);

    await page.goto("https://tailwindcss.com/");

    await recorder.start("video with old headless.mp4");
    await animate(page);
    await recorder.stop();
  } catch (e) {
    console.log(e);
  } finally {
    await browser.close();
  }
})();

const animate = async (page) => {
  await wait(500);
  await page.evaluate(() => {
    window.scrollBy({ top: 500, left: 0, behavior: "smooth" });
  });
  await wait(500);
  await page.evaluate(() => {
    window.scrollBy({ top: 1000, left: 0, behavior: "smooth" });
  });
  await wait(1000);
};

const wait = (ms) => new Promise((res) => setTimeout(res, ms));

video.with.old.headless.mp4

Code and Video with new Headless

"use strict";

const puppeteer = require("puppeteer");
const { PuppeteerScreenRecorder } = require("puppeteer-screen-recorder");
const util = require("util");
const exec = util.promisify(require("child_process").exec);

(async () => {
  const browser = await puppeteer.launch({ headless: "new" });
  try {
    const page = await browser.newPage();
    await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 });

    const recorder = new PuppeteerScreenRecorder(page);

    await page.goto("https://tailwindcss.com/");

    await recorder.start("video with new headless.mp4");
    await animate(page);
    await recorder.stop();
  } catch (e) {
    console.log(e);
  } finally {
    await browser.close();
  }
})();

const animate = async (page) => {
  await wait(500);
  await page.evaluate(() => {
    window.scrollBy({ top: 500, left: 0, behavior: "smooth" });
  });
  await wait(500);
  await page.evaluate(() => {
    window.scrollBy({ top: 1000, left: 0, behavior: "smooth" });
  });
  await wait(1000);
};

const wait = (ms) => new Promise((res) => setTimeout(res, ms));

video.with.new.headless.mp4

[mvgiacomello]

I am having exactly the same issue on my side.

[mvgiacomello]

The workaround for this is to set the window size when creating the browser object - not just the viewport: --window-size=${width},${height}