[BUG] window.orientation on WebKit is different to what Safari gives you

[dmrock]

Context:

• Playwright Version: 1.17
• Operating System: [Mac OS 12.1]
• Node.js version: [17.2]
• Browser: [WebKit]
• Extra: [same scenario in Chrome and Firefox work properly; app was checked at Safari Technology Preview, everything working properly as well; React]

Code Snippet

    test.only('Game card', async ({ page, isMobile }) => {
      if (isMobile) {
        await page.tap('data-test-id=game-card')
        await page.tap('data-test-id=game-preview-card__play-btn')
      } else {
        await page.hover('data-test-id=game-card')
        await page.click('data-test-id=game-card__play-btn')
      }
      await expect(page).toHaveURL('/en-eu/registration')
      await page.waitForSelector('input[name=email]')
    })

Describe the bug

The site has a game card, if you hover over it, 2 buttons appear. That how it works in Chrome and Firefox, but buttons do not appear in Safari.

[mxschmitt]

Can you create a small repro for us so we can verify it ourselves? Otherwise we can't act on it.

You can also try our latest release candidate, which has a more recent version of WebKit: npm install @playwright/test@1.18.0-rc1.

[dmrock]

1. Run npx playwright codegen --device="Desktop Crome" e2e.superboss.me
2. Try to hover mouse over the game card (btn Play and Demo are displayed)
3. Run npx playwright codegen --device="Desktop Safari" e2e.superboss.me
4. Try to hover mouse over the game card (there are no btns)

[mxschmitt]

Thanks! Was able to make a minimal reproducible out of it. Internally in the application there is a check for "isMobile" which is performed like this: typeof window.orientation !== 'undefined'

• Chromium: false
• WebKit: true

If it's true the card descriptions don't get rendered -> no hover animations. Sounds like a bug on our side since this behaviour is different to what Safari does, will keep you updated.