[Bug]: expect(locator).toHaveScreenshot() generates different picture width when running test headed vs headless

[marcusNumminen]

Version

1.48.2

Steps to reproduce

1. Run the following test in headless mode ("Show browser" unset in VS code):

test('screenshot test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page.locator('.hero')).toBeVisible();
  await expect(page.locator('.hero')).toHaveScreenshot('heroBanner.png', {maxDiffPixelRatio: 0.5});
});

to generate the "baseline snapshot".

2. Now set the "Show browser" option in VS code and run the test again
   => Test fails with the following error msg: Expected an image 1280px by 410px, received 1264px by 410px.

3. Now delete the "baseline snapshot" and run the test again to generated the "baseline snapshot" in headed mode

4. Now unset the "Show browser" option in vs code and run the test again
   => Test fail with the following error msg: Expected an image 1264px by 410px, received 1280px by 410px.

It seems like the maxDiffPixelRatio makes no difference here.

Expected behavior

It should not make any difference if I run the browser in headed or headless mode, the screenshot should be the same size

Actual behavior

I get different picture width when taking screenshots depending if I run the tests in headed or headless mode

Additional context

No response

Environment

System:
OS: Windows 11 10.0.22631
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
Memory: 19.55 GB / 31.85 GB
Binaries:
Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.15.4 - C:\Program Files\nodejs\pnpm.CMD
IDEs:
VSCode: 1.95.0 - C:\Users\marcus.numminen\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
Languages:
Bash: 5.2.26 - C:\Program Files\Git\usr\bin\bash.EXE
npmPackages:
@playwright/test: ^1.48.2 => 1.48.2

[Skn0tt]

Hi Marcus! Headed and headful will always behave slightly different, that's in the nature of rendering sadly. I'm a little surprised to see two different pixel sizes. I'm having trouble reproducing though - following the steps you're giving, the test is green both headed and headless. I'm using Chromium. What browser are you observing this on?

[marcusNumminen]

I use Chromium, the one that comes when you do npx playwright install On my side this is 100% reproducible

[marcusNumminen]

I created a gif of the problem

[yury-s]

I cannot reproduce it with the provided example, but it seems to be the same rendering problem as in #12683