[BUG] Element loses hover when calling locator.screenshot and playwright is run in headed mode in Docker

**Context:**
- Playwright Version: 1.18.1
- Operating System: Mac
- Node.js version: 17.4.0
- Browser: Chromium
- Extra: The command i'm running in the Docker container (from `mcr.microsoft.com/playwright:v1.18.1-focal`) is:
```
xvfb-run playwright test --config=src/id-cta-ci.config.ts
```

id-cta-ci.config.ts:
```ts
import { PlaywrightTestConfig } from '@playwright/test';
import os from 'os';

const config: PlaywrightTestConfig = {
forbidOnly: false,
grep: /@id-cta/,
reporter: [['list'], ['allure-playwright']],
retries: 1,
use: {
headless: false,
launchOptions: {
args: ['--disable-dev-shm-usage']
},
screenshot: 'only-on-failure',
trace: 'off',
video: 'off'
},
workers: os.cpus().length
};

export default config;
```

## System:
- OS: macOS 12.0.1
- Memory: 24.32 MB / 16.00 GB
## Binaries:
- Node: 17.4.0 - /usr/local/bin/node
- Yarn: 1.22.17 - /usr/local/bin/yarn
- npm: 8.3.1 - /usr/local/bin/npm
## Languages:
- Bash: 3.2.57 - /bin/bash
## npmPackages:
- playwright-chromium: 1.18.1 => 1.18.1

**Code Snippet**

```javascript
test.only('sample test', async ({ page }) => {
await page.goto('https://account.test.bbc.com/account/tv');
const signIn = page.locator('a:has-text("Sign in")');
const pageWrapper = page.locator('div.page__content');
await signIn.hover();
await page.waitForTimeout(250);
await pageWrapper.screenshot({ path: 'screenshot.png' });
});
```

**Describe the bug**

The sign in link loses hover when `pageWrapper.screenshot` is called.

`screenshot.png` is:


If you set `headless: true` in the config file and re-run the test the screenshot is:


If you run playwright on the host (not in a Docker container), this works okay in headless and headed modes.

Interestingly, when I replaced `pageWrapper.screenshot` with `page.screenshot`, the link had hover in the screenshot.