Bottom of video cut off when specifying an exact width/height using headless : chrome and google-chrome-stable

[ericlucit]

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  I am attempting to render video files at an exact resolution (width x height). During this process I load a URL that has content within it set to 100% screen width and height (using css properties 100vw and 100vh - When viewing this content in a browser, it is always perfect.

I discovered that when setting my heights and widths to exactly what I want 1920x1080 the bottom of the video was being cut off

However, when I ADD 139 pixels (exactly) to the height of the window size, then, it is perfect.

Even more surprising (and for the general case. if I set the height to some VERY large multiple (eg. 108000) it will also then render perfectly

Here is what should be a reproduceable set of code

I am using the following image with a 10px border around it

const width=1920;
const height=1080;

const browser = await puppeteer.launch({
    executablePath: '/usr/bin/google-chrome-stable',
    headless: 'chrome', // new headless mode can support GPU
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox',
      '--disable-software-rasterizer', 
      '--enable-gpu-rasterization',
      '--ignore-gpu-blocklist',
      '--use-gl=gpu',
      '--window-size=' + width + ',' + height
    ],
  });

  await page.goto(url, { waitUntil: 'networkidle2' });

  const page = await browser.newPage();

  await page.setViewport({
    width: width,
    height: height,
    deviceScaleFactor: 2 // High DPI for crisper text and images
  });

  console.log('Initializing screen recorder');
  const recorder = new PuppeteerScreenRecorder(page, {
    followNewTab: true,
    fps: 30,
    videoFrame: {
      width: width,
      height: height,
    },
    videoCodec: 'libx264',
    videoCrf: 18,
    videoPreset: 'veryfast',
    videoBitrate: 8000,
    videoMute: true,
  });

This is the result - Note that the bottom of the image is cut off

If I add 139 pixels to the height, we get the right height

const browser = await puppeteer.launch({
    executablePath: '/usr/bin/google-chrome-stable',
    headless: 'chrome', // new headless mode can support GPU
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox',
      '--disable-software-rasterizer', 
      '--enable-gpu-rasterization',
      '--ignore-gpu-blocklist',
      '--use-gl=gpu',
      '--window-size=' + width + ',' + (height+139)
    ],
  });

And finally, making the height 100x the height, we get a good result as well

const browser = await puppeteer.launch({
    executablePath: '/usr/bin/google-chrome-stable',
    headless: 'chrome', // new headless mode can support GPU
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox',
      '--disable-software-rasterizer', 
      '--enable-gpu-rasterization',
      '--ignore-gpu-blocklist',
      '--use-gl=gpu',
      '--window-size=' + width + ',' + (height*100)   //100 times the height!
    ],
  });

• Other information (e.g. detailed explanation, stack traces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

My thoughts are is that this is because of the toolbar in chrome using up 139 pixels

• Related Issues
  The following issues may be related or adjacent

• Phone aspect ratio recordings e.g. 1080x1920 #83

• New puppeteer headless mode breaks the screen recording #74

• puppeteer-screen-recorder capture is zoomed in (headless) #78

• Puppeteer New Headless causing the video to zoom in  #79

[ericlucit]

I want to also mention that '--window-size=' + width + ',' + (height*100) //100 times the height! will DISABLE hardware acceleration - So this is not a viable solution

Adding the specific pixels to the height is the best bet although I have not tested with other resolutions