[REGRESSION]: bundled WebKit renders websites built with Angular/React incorrectly since v1.25.0

Context:

• GOOD Playwright Version: <=1.24.2
• BAD Playwright Version: >1.25.0
• Operating System: Microsoft Windows 10 Version 21H2 (OS Build 19044.1826)
• Extra: Node v16.14.2, Yarn v1.22.4

Code Snippet

Basically, everything made via the API got 2-5 times slower. For example page.goto:

playwright.config.js

const { devices } = require('@playwright/test')

const config = {
  use: {
    browserName: 'webkit',
    ...devices['iPhone 11']
  }  
}

module.exports = config

example.test.js

const { test, expect } = require('@playwright/test')

test.describe.serial('flight search', () => {
  let page
  test.beforeAll(async ({ browser }) => page = await browser.newPage())
  test.afterAll(async () => await page.close())

  test('should be opened on page', async () => {
    await page.goto('https://www.delta.com/eu/en')
  })
})

Describe the bug

Since the version v1.25.0 the bundled/patched Webkit won’t render correctly most pages built with Angular or React on Windows OS. I believe for the same reason but the Webkit tests got extremely slow if we try to upgrade anywhere above v1.24.2. Let me share some example websites where the issue can be reproduced:

• Delta Air Lines: https://www.delta.com/eu/en
• Pay Pal: https://www.paypal.com/fr/home
• Liligo.com: https://www.liligo.fr/
• Skyscanner: https://www.skyscanner.fr/

As far as I see it has nothing to do with Playwright or Playwright Test libraries, but the patched Webkit executable itself. You can even reproduce this without Playwright simply by opening the Webkit executable on a Windows machine and visiting any of the sites I’ve listed above.

Works and renders correctly on webkit-1683:

✅ C:\Users\theDa\AppData\Local\ms-playwright\webkit-1683\Playwright.exe

Faulty on patched Webkits bundled since 1.25 (e.g. webkit-1715):

❌ C:\Users\theDa\AppData\Local\ms-playwright\webkit-1715\Playwright.exe

1. dropdown got slow and laggy
2. background-image rendering issues (you can see this on many of the above example websites, that is the most visible symptom)
3. floating elements disappearing from the viewport e.g. cookie consent

The issue 1.) is the most worrisome and it prevents us from upgrading Playwright.

I’ve noticed there were some changes regarding Webkit patching between 1.24.2 and 1.25.0, I am pretty sure that is the issue. I haven’t found others reporting this (or they just didn’t use the same keywords to describe the issue) but I think this would be worth a fix for those who have sites built in a similar way and they want to test against Safari 😅

Thank you!

[testgitdl]

Tested on 1.28.0-alpha-oct-17-2022 and my problem is fixed https://github.com/microsoft/playwright/issues/17614 Thank you!

[dgozman]

@theDavidBarton run npm install --save-dev @playwright/test@1.28.0-alpha-oct-17-2022