[Bug]: Very wide letter spacing in screenshots

[andreasg123]

Version

1.50.1

Steps to reproduce

Fonts are loaded from .woff2 files. Font sizes are specified in rem. The width of the browser window is used for setting the root font size, 5px in the screenshots and 4px in additional explorations.

This is several steps into the test so that the font would be loaded. Also, the glyphs are correct just the letter spacing isn't. Screenshots are taken either with .screenshot() or .toHaveScreenshot().

Expected behavior

In Playwright 1.49.1 and earlier, everything worked as expected.

Actual behavior

In Playwright 1.50.1, screenshots have very wide letter spacing for some font sizes. In the attached screenshot (1rem=5px), only the font size of 3rem is affected (with different weights). When making the browser window smaller (1rem=4px), the 2.5rem fonts are affected, too.

Additional context

No response

Environment

GitHub action runner with Ubuntu 24.04.

The problem does not appear in this environment:

  System:
    OS: macOS 14.7.4
    CPU: (10) arm64 Apple M1 Max
    Memory: 787.53 MB / 32.00 GB
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 7.16.1 - /opt/homebrew/bin/pnpm
  Languages:
    Bash: 3.2.57 - /bin/bash

[mxschmitt]

Would it be possible to share your workflow yaml with us? Are you using Docker or a normal runner-image? Are you using npx playwright install --with-deps?

[andreasg123]

We have our own large runner that is set up the same as ubuntu-latest, just with more CPU cores.

We run this in the workflow:

npx playwright install-deps

yarn test:e2e maps to yarn playwright test.

  e2e:
    name: Test E2E
    runs-on: ubuntu-latest-16-cores
    needs: [build-embedded]
    timeout-minutes: 20
    permissions:
      contents: read
      packages: read

    steps:
      - uses: actions/checkout@v4
        with:
          lfs: true
      - uses: ./.github/actions/install
        with:
          PACKAGE_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      - uses: ./.github/actions/build
      - uses: actions/download-artifact@v4
        with:
          name: embedded-artifact
          path: embedded-artifact
      - run: npx playwright install-deps
      - name: E2E Test
        shell: bash
        run: yarn test:e2e
        env:
          PLAYWRIGHT_WORKER_COUNT: 8
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-test-results
          path: ${{ github.workspace }}/packages/instrument-e2e/test-results
          retention-days: 7

[mxschmitt]

This looks good then from our side (was checking for ubuntu + install-deps)! Would it be possible to provide a small reproducible so we can investigate further? Ideally something self-isolated in form of a small HTML site.

[andreasg123]

I'll see if I can find time for creating a reproducible environment. As staying at 1.49.1 addresses the issue for us, this may only become a priority for us when we want to use a newer feature.

[Skn0tt]

New Playwright versions always ship with new browser versions, and staying on 1.49.1 has the risk of you not catching behaviour changes in browsers. So keep in mind that this funky letter spacing might eventually make its way to your users, if it's really a browser change!

[rankida]

We have also seen this with newer versions of Playwright. Unable to work out why it works sometimes and doesn't others, but we do manually test in both latest and beta Chrome and don't see the issue.

Just adding this comment here to point out that it is not a single person's strange experience as we see it too.

If we can work out what causes it I will feed back here.

[Skn0tt]

If we can work out what causes it I will feed back here.

Perfect, thanks! Once we have a repro, we can start investigating what's causing it.