[BUG] background-attachment:fixed prevents scrolling viewport on webkit with isMobile: true

[jamesbirtles]

System info

• Playwright Version: 1.34.3
• Operating System: Ubuntu 22.04.2
• Browser: webkit
• Other info: isMobile: true

Source code

• I provided exact source code that allows reproducing the issue locally.

Link to the GitHub repository with the repro

https://github.com/jamesbirtles/playwright-webkit-mobile-scroll-to-click

Steps

• Be on linux
• npm test

Expected

Tests should pass on all device configurations

Actual

Test fails on "Mobile Safari" device.

---

It appears the page is not being scrolled (whilst trying to bring the button at the bottom of the page into view in order to click it) on the webkit browser when isMobile is true and background-attachment:fixed is applied (at least to html or body element). You can see this in my example repo. A background image needs to be set to reproduce this, but it doesn't matter if the url actually resolves to anything.

You can see in this github action run - https://github.com/jamesbirtles/playwright-webkit-mobile-scroll-to-click/actions/runs/5201582813/jobs/9381960009 - that this only appears to happen when running on linux. This does not occur locally on my M2 mac, nor on the macos-latest github runner. I can reproduce locally by running a linux docker container.

The issue only appears to occur on mobile webkit, it does not appear on mobile chromium or desktop variants of either.

[edumserrano]

Any updates on this? Any workaround, other than not using background-attachment:fixed or setting isMobile to false on the playwright config for the project?
I'm having this issue on playwright 1.35.1.

I thought I was going crazy when I came across this issue. The tests were running fine until we did a simple CSS change to add the background-attachment:fixed and suddenly lots of tests started to fail on the projects using webkit with isMobile set to true. The tests would fail at the timeout with errors like:

waiting for getByRole('button', { name: 'Back' })
  locator resolved to <button size="xl" type="button" _ngcontent-bro-c3="" ng-…>…</button>
attempting hover action
  waiting for element to be visible and stable
  element is visible and stable
  scrolling into view if needed
  done scrolling
  element is outside of the viewport
retrying hover action, attempt #1
  waiting for element to be visible and stable
  element is visible and stable
  scrolling into view if needed
  done scrolling
  element is outside of the viewport
retrying hover action, attempt #2
  waiting 20ms
  waiting for element to be visible and stable
  element is visible and stable
  scrolling into view if needed
  done scrolling
  element is outside of the viewport
retrying hover action, attempt #3
  waiting 100ms
  waiting for element to be visible and stable
  element is visible and stable
  scrolling into view if needed
  done scrolling
  element is outside of the viewport

Call log:
  - expect.toHaveScreenshot(two-sign-in-options.png) with timeout 40000ms
  -   generating new stable screenshot expectation
  - taking page screenshot
  -   disabled all CSS animations
  - waiting 100ms before taking screenshot
  - taking page screenshot
  -   disabled all CSS animations
  - 46695 pixels (ratio 0.20 of all image pixels) are different.
  - waiting 250ms before taking screenshot
  - taking page screenshot
  -   disabled all CSS animations
  - 46308 pixels (ratio 0.20 of all image pixels) are different.
  - waiting 500ms before taking screenshot
  - taking page screenshot
  -   disabled all CSS animations
  - 46308 pixels (ratio 0.20 of all image pixels) are different.
  - waiting 1000ms before taking screenshot
  - taking page screenshot
  -   disabled all CSS animations
  - 46308 pixels (ratio 0.20 of all image pixels) are different.
  - waiting 1000ms before taking screenshot
  - taking page screenshot

[aslushnikov]

@JoelEinbinder any ideas?

[JoelEinbinder]

@JoelEinbinder any ideas?

No thank you. gl

[fabbaumgartner]

Are there updates on this issue?