[Bug]: When running in new headless mode, grey rectangles sometimes visible in recorded video

[gladykov]

Version

1.52.0

Steps to reproduce

1. Clone https://github.com/gladykov/playwright-grey-rectanle-video
2. npm install
3. npx playwright test && npx playwright show-report
4. Open report and download video

Pay attention that new headless mode is used:

  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        channel: 'chromium', },
    },

  ],

Expected behavior

Video should record whole web page

Actual behavior

This one is fun. On some web pages (ex. A. - Atlassian login xyz.atlassian.net ) there will be grey rectangle under the video.

But visiting some pages ( ex. B - Google.pl ) will remove grey rectangle:

and on second visit to A, grey rectangle is not visible anymore:

Full video:

https://github.com/user-attachments/assets/40791d68-80fe-4e69-9888-3348382e1df5

In recorded video (and in repo with repro) I play with viewportSize to show how it affects grey area, before navigating to B. Without viewport size changes bug also exists.

Additional context

This looks similar to https://github.com/microsoft/playwright/issues/31242 and https://github.com/microsoft/playwright/issues/15131

This started to happen when new headless mode was introduced.

Other actions which will clear grey rectangle: successful login to Atlassian Confluence - confirms website is able to reset some browser state, to make it disappear.

Other website which will show rectangle: https://kuba.gladykowski.com/blog/

I tried to enforce html / body height using JS, but it did not change anything.

Let me know if I can assist more. If you feel like this bug does not belong here, let me know and I will be happy to open it against Chromium.

Environment

System:
    OS: Linux 6.14 EndeavourOS
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 5.98 GB / 15.48 GB
    Container: Yes
  Binaries:
    Node: 18.20.8 - ~/.config/nvm/versions/node/v18.20.8/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.8.2 - ~/.config/nvm/versions/node/v18.20.8/bin/npm
  Languages:
    Bash: 5.2.37 - /usr/bin/bash
  npmPackages:
    @playwright/test: ^1.52.0 => 1.52.0 

XFCE / X11

I can reproduce this also when we run tests on Ubuntu @latest in Github Actions runners

[yury-s]

Clone https://github.com/gladykov/playwright-grey-rectanle-video ... In recorded video (and in repo with repro) I play with viewportSize to show how it affects grey area, before navigating to B.

The test is changing viewport size in the middle. The video frame ratio is determined by the first viewport size and after that Playwright will fit the new images into the same frame size which may leave empty space below or to the right from the actual picture. If the resized viewport has the same side ratio, it will fill entire frame. This is working as intended.

Without viewport size changes bug also exists.

Yes, I can see that after removing the resizes the first website picture is still incomplete (the same is also visible on the tracing filmstrip), doesn't reproduce in old headless:

import { test } from '@playwright/test';

test('Create video', async ({ page }) => {
  const waitTime = 2000
  await page.goto('https://staging.confluence.atlasauthority.com/wiki/home');
  await page.waitForTimeout(waitTime)
  await page.goto('https://google.pl');
  await page.waitForTimeout(waitTime)
  await page.goto('https://staging.confluence.atlasauthority.com/wiki/home');
  await page.waitForTimeout(waitTime)
});

[effektsvk]

Hello,

I managed to replicate it even when not using headless mode, but it happens when using channel in projects[*].use. I tested with channel being set to: chromium (new headless mode), chrome and msedge. All three videos have the grey rectangle at the bottom. When I don't add any channel (for example use: { ...devices['Desktop Chrome'] }) property, the issue is not present.

I also tested with simple HTML page like this, I still managed to replicate it, so it might not be caused by any specific styles.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>Welcome to your simple static page.</p>
  </body>
</html>

Here is my reproduction repo: https://github.com/effektsvk/playwright-cropped-video-reproduction

[alescinskis]

The test is changing viewport size in the middle. The video frame ratio is determined by the first viewport size and after that Playwright will fit the new images into the same frame size which may leave empty space below or to the right from the actual picture. If the resized viewport has the same side ratio, it will fill entire frame. This is working as intended.

@yury-s perhaps it's possible to implement some sort of a workaround? like

• override in test to stop video recording
• change viewport size
• start video recording

in this case it will be at least applicable for cases where you change viewport size at the start of the test

[dgozman]

I was able to reproduce this issue with playwright v1.52.0, but everything works correctly with v1.55.0. @gladykov @effektsvk Could you please try with 1.55 and see whether the issue is fixed one your end?

[gladykov]

I see this issue gone, but also I cannot reproduce it anymore on 1.52.0 . So either Atlassian web page changed, or this was truly fixed under the hood (ex. in Chromium). I think we can close this one, unless it will appear again.