<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.29.2</li>
<li>Operating System: macOS Ventura 13.1</li>
<li>Node.js version: v18.13 (but tested 16.19 as well)</li>
<li>Browser: Chromium</li>
<li>Extra:
<ul dir="auto">
<li>Does happen for both M1 and Intel chips</li>
<li>We use the mcr.microsoft.com/playwright:v1.29.2-focal docker image in CI, the difference is the same when comparing local vs in the image.</li>
</ul>
</li>
</ul>
<details>
<summary>envinfo output</summary>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="## System:
 - OS: macOS 13.1
 - Memory: 1.71 GB / 32.00 GB
## Binaries:
 - Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
 - npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
## Languages:
 - Bash: 3.2.57 - /bin/bash"><pre class="notranslate"><code class="notranslate">## System:
 - OS: macOS 13.1
 - Memory: 1.71 GB / 32.00 GB
## Binaries:
 - Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
 - npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
## Languages:
 - Bash: 3.2.57 - /bin/bash
</code></pre></div>
</details>
<p dir="auto"><strong>Code Snippet</strong><br>
More importantly than the test: This snippet has to be run locally and then inside the docker image / some sort of CI for the bug to happen.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { expect, test } from &quot;@playwright/test&quot;;

test(&quot;Onboarding Step 1&quot;, async ({ page }) =&gt; {
  await page.goto(&quot;/&quot;);
  await page.getByText(&quot;Login&quot;).click();
  await expect(page.getByTestId(&quot;onboarding-heading&quot;)).toContainText(
    &quot;Onboarding Step 1&quot;
  );
  await expect(page).toHaveScreenshot(
    &quot;onboarding-step-1.png&quot;,
    { fullPage: true }
  );
});"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">expect</span><span class="pl-kos">,</span> <span class="pl-s1">test</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"@playwright/test"</span><span class="pl-kos">;</span>

<span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s">"Onboarding Step 1"</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> page <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">goto</span><span class="pl-kos">(</span><span class="pl-s">"/"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">getByText</span><span class="pl-kos">(</span><span class="pl-s">"Login"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">click</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">getByTestId</span><span class="pl-kos">(</span><span class="pl-s">"onboarding-heading"</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toContainText</span><span class="pl-kos">(</span>
    <span class="pl-s">"Onboarding Step 1"</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toHaveScreenshot</span><span class="pl-kos">(</span>
    <span class="pl-s">"onboarding-step-1.png"</span><span class="pl-kos">,</span>
    <span class="pl-kos">{</span> <span class="pl-c1">fullPage</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">Screenshot have flaky dimensions. Our locally generated, full-page, screenshots sometimes differ from those created inside docker by 1px, sometimes 2px height. If running the same test multiple times in the same environment (either docker or local), the screenshots match all the time. All tests are run with headless chromium. I've also experimented with any antialiasing and font rendering setup. This did not help either.</p>
<p dir="auto">Result, for example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    Error: Screenshot comparison failed:

      Expected an image 1280px by 1740px, received 1280px by 1739px. 

    Call log:
      - expect.toHaveScreenshot with timeout 5000ms
      -   verifying given screenshot expectation
      - taking page screenshot
      -   disabled all CSS animations
      - Expected an image 1280px by 1740px, received 1280px by 1739px. 
      - waiting 100ms before taking screenshot
      - taking page screenshot
      -   disabled all CSS animations
      - captured a stable screenshot
      - Expected an image 1280px by 1740px, received 1280px by 1739px. "><pre class="notranslate"><code class="notranslate">    Error: Screenshot comparison failed:

      Expected an image 1280px by 1740px, received 1280px by 1739px. 

    Call log:
      - expect.toHaveScreenshot with timeout 5000ms
      -   verifying given screenshot expectation
      - taking page screenshot
      -   disabled all CSS animations
      - Expected an image 1280px by 1740px, received 1280px by 1739px. 
      - waiting 100ms before taking screenshot
      - taking page screenshot
      -   disabled all CSS animations
      - captured a stable screenshot
      - Expected an image 1280px by 1740px, received 1280px by 1739px. 
</code></pre></div>
<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.27.1</li>
<li>Operating System: MacOS 13.0</li>
<li>Node.js version: 16.15.0</li>
<li>Browser: All</li>
<li>Extra: Also CI using MacOS 12 (Github Actions)</li>
</ul>


<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">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.</p>
<p dir="auto">These two example come from the same code, same server (NextJS locally) running, just <code class="notranslate">yarn test</code> two times in a row:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/26208850/202003575-47a4f38d-31f9-4804-9f4e-69520d1e4fc8.png"><img src="https://user-images.githubusercontent.com/26208850/202003575-47a4f38d-31f9-4804-9f4e-69520d1e4fc8.png" alt="full-page-actual" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/26208850/202003582-edfa4175-5ba1-449e-84f4-86b26907ae60.png"><img src="https://user-images.githubusercontent.com/26208850/202003582-edfa4175-5ba1-449e-84f4-86b26907ae60.png" alt="full-page-expected" style="max-width: 100%;"></a></p>
<p dir="auto">I'm sorry for the long image, but that may be part of the problem (although short pages sometimes have this problem too).</p>
<p dir="auto">If you compare the images using something like <a href="https://www.diffchecker.com/image-diff/" rel="nofollow">https://www.diffchecker.com/image-diff/</a> you can see the weird effect.</p>
<p dir="auto">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.</p>
<p dir="auto">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</p>
<p dir="auto">Thanks in advance!</p>