[BUG] Same test, different runs causes different heights with a weird compression effect

Context:

• Playwright Version: 1.27.1
• Operating System: MacOS 13.0
• Node.js version: 16.15.0
• Browser: All
• Extra: Also CI using MacOS 12 (Github Actions)

Describe the bug

Subsequent screenshots (on different test runs) of the same page are coming out with different heights. This is mainly due to a weird “compression” (like smashing) effect on one of the screenshots.

These two example come from the same code, same server (NextJS locally) running, just yarn test two times in a row:

I’m sorry for the long image, but that may be part of the problem (although short pages sometimes have this problem too).

If you compare the images using something like https://www.diffchecker.com/image-diff/ you can see the weird effect.

Is this a known bug? The differences are even greater once we run the tests on CI (more screenshots are different), but it’s flaky, so sometimes it happens and sometimes everything is good.

EDIT: Just to clarify, by compression I mean that the pixels themselves are smashed, so everything is shorter, which in turn causes the heights of the screenshots to differ, like on of them was “smashed”, which is wrong, e.g. causes the square logo to turn into a rectangle, etc

Thanks in advance!

[pavelfeldman]

That is something we might be able to fix!

[filipesmedeiros]

Ok I don’t know if it helps, but running it inside Docker Linux (and CI on Linux) fixed it (or at least all the tests passed).

So the issue seems to be specific for Mac!

EDIT: nevermind, I think it was a flaky test that passed 😦