[BUG] On mobile-webkit devices, page keeps resizing by itself and stops being responsive.

[Qibaoooo]

Context:

• Playwright Version: mcr.microsoft.com/playwright:v1.25.0-jammy
• Operating System: Linux
• Node.js version: v14.20.0
• Browser: mobile-WebKit
• Extra: issue only happens when run in container with mobile-webkit devices; any other combination of set-ups don't have this issue. So far only notice this issue when going to this page.

You can clone this repo and run the test in playwright container to reproduce error.

Code Snippet

https://github.com/Qibaoooo/playwright-issue/blob/main/tests/demo-test.spec.ts

Describe the bug

Page keeps resizing by itself and stop being responsive. See attachment for the recording. video.webm

[cwilliams7]

Experiencing the same issue, mobile-webkit works fine on my Mac but when I run it in a container (1.26.0-focal or jammy) screenshot comparisons stop working. I looked at the video playback and I see that the screen is constantly re-sizing which I think is causing the screenshot to fail because it is waiting for the page to be stable.

[sylvaingi]

Also observing this error on v1.28.0 within the focal Docker image. The viewport is alternating very quickly between its intended width + height and the same dimensions divided by two.

Tried fiddling with the deviceScaleFactor using 1 as a value to disable high dpr emulation, it did not work.

[daniel-meneses]

+1 as described using mcr.microsoft.com/playwright:v1.27.0-focal

[deviantintegral]

Still seeing this in 1.31.1, not using the docker container (but, running in Docker). Anyone have a workaround for CI scenarios?

[chadjohnson21]

Still seeing this on iPhone (all models) device profile on Playwright 1.37.0 running on Debian 11 bullseye

[nmerget]

I saw this for Playwright 1.43.1 (Windows and mcr.microsoft.com/playwright:v1.43.1).

In my special case one part in my component caused the issue:

document.documentElement.style.blockSize = "100%"; document.documentElement.style.overflow = "hidden";

I used the code to force some fixed layout for the page. And it works as expected for all browsers except for mobile-webkit.

We've also had the luxury of testing it for Angular, React and Vue and all failed, so it's not a framework-specific thing. My workaround was to opt out the execution and add the desired styles via css, but just for the tests.

For this page is there some useEffect changing the style of the document? Maybe this is causing the rerender of the entire page?

To summarize, I guess it's a bug in mobile-webkit maybe related to the page object provided by the playwright test. It's kind of wired that all other projects and even dektop-webkit works as expected...

[kasper573]

Is this related to or possibly the same issue as https://github.com/microsoft/playwright/issues/21784 ?

[dyllandry]

Observing on mcr.microsoft.com/playwright:v1.45.1-jammy

Is there any workaround? I don't know if I'd be able to narrow it down to a specific line of css, unless someone can offer advice there. For now I'll disable iPhone tests.

[dyllandry]

I was able to get my tests working by running playwright in headed mode and using xvfb-run!

xvfb-run npx playwright test --headed --config playwright.iphone.ts

Because these headed tests are a lot slower, I separated out all the iPhone projects/devices into a separate playwright configuration from all the chrome/firefox/safari tests so that I can run just the iPhone tests this way. For the remaining tests I don't use xvfb-run or headed mode to keep them fast.

I don't remember where I got this work around from, I don't think I came up with it on my own.

[harsh-sql]

@dyllandry I am also doing that only. I have also made a separate project and defined headless as false and it works fine for now but yeah, it is slow so still finding a solution for that. I tried to explicitly define viewport but that does not work I guess because headless is all together a separate browser and have different settings that cannot be changed in config file so leaving it as it is until any update comes for such a thing.