[Bug]: Headless chromium media query (pointer: fine) changing on some web pages while running in docker image and native linux

[kevswanberg]

Version

1.49.0

Steps to reproduce

In the playwright docker image container and on native linux Chromium, the media query for pointer type will change after going to certain pages.

Here is a test project going to several different pages, running the same media query before and after. Certain pages consistently fail.

• Clone: https://github.com/kevswanberg/playwright_chromium_docker_issue
• Run:

    docker run -it --rm  -v ./package.json:/home/somewhere/package.json -v ./tests:/home/somewhere/tests \ 
        -v  ./playwright.config.ts:/home/somewhere/playwright.config.ts mcr.microsoft.com/playwright:v1.49.0-noble \
        /bin/bash -c "cd /home/somewhere/ && npm i && npx playwright test"

The spec tests a bunch of different sites first evaling the media query, goto page, and evaluate the media query again. On most sites (pointer: fine) evaluates as true in both checks, however there are a few that don't.

Expected behavior

In headless chromium with given run settings the media query (pointer: fine) will be consistent regardless of the current web page.

Actual behavior

Some web pages change the value of the media query (pointer: fine) to false.

Additional context

Might be a bug in headless Chromium, it works in headed mode for both docker and native.

Possibly related:
#18777

This issues mentions headed mode, but it currently seems to work correctly in headed mode.
https://issues.chromium.org/issues/40903645?pli=1

Environment

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (2) arm64 unknown
    Memory: 1.61 GB / 1.91 GB
    Container: Yes
  Binaries:
    Node: 22.11.0 - /usr/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.9.0 - /usr/bin/npm
  Languages:
    Bash: 5.2.21 - /usr/bin/bash

AND

 System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (4) x64 Intel(R) Core(TM) i5-6440HQ CPU @ 2.60GHz
    Memory: 12.05 GB / 15.36 GB
    Container: Yes
  Binaries:
    Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
  IDEs:
    VSCode: 1.69.2 - /usr/bin/code
  Languages:
    Bash: 5.2.21 - /usr/bin/bash
  npmPackages:
    @playwright/test: ^1.49.0 => 1.49.0 
    playwright: ^1.49.0 => 1.49.0

[mxschmitt]

Investigation, looks like 'cross-origin-opener-policy' header is causing the difference:

import { test, expect, Page } from "@playwright/test";

const doTest = async (site: string, page: Page) => {
  expect(await page.evaluate(() => window.matchMedia("(pointer: fine)").matches)).toBeTruthy();
  await page.goto(site);
  expect(await page.evaluate(() => window.matchMedia("(pointer: fine)").matches)).toBeTruthy();
};

for (const url of ["https://google.com", "https://facebook.com", "https://instagram.com", "https://bing.com", "https://whatsapp.com", "https://chatgpt.com", "https://amazon.com", "https://duckduckgo.com", "https://tiktok.com", "https://msn.com", "https://netflix.com", "https://weather.com", "https://live.com", "https://naver.com", "https://linkedin.com", "https://microsoft.com", "https://twitch.tv", "https://office.com", "https://vk.com", "https://openai.com", "https://pinterest.com", "https://quora.com", "https://discord.com", "https://canva.com", "https://aliexpress.com", "https://github.com", "https://apple.com", "https://globo.com", "https://spotify.com", "https://roblox.com", "https://mail.ru", "https://imdb.com", "https://cnn.com", "https://nytimes.com", "https://xkcd.com", "https://gmail.com"]) {
  test(url, async ({ page }) => {
    await page.context().route('**/*', async route => {
      const response = await route.fetch();
      const headers = response.headers();
      delete headers['cross-origin-opener-policy'];
      await route.fulfill({
        response,
        headers: headers
      });
    })
    await doTest(url, page);
    await page.context().unrouteAll({ behavior: 'ignoreErrors' })
  });
}

Minimal reproducible:

test('with cross-origin-opener-policy', async ({ page }) => {
  await page.route('**/*', async route => {
    await route.fulfill({
      headers: {
        'cross-origin-opener-policy': 'same-origin',
        'content-type': 'text/html'
      },
      body: '<html><body><a href="https://example.com">link</a></body></html>'
    });
  });
  expect(await page.evaluate(() => window.matchMedia("(pointer: fine)").matches)).toBeTruthy();
  await page.goto('https://example.com');
  expect(await page.evaluate(() => window.matchMedia("(pointer: fine)").matches)).toBeTruthy();
});