[Bug]: Flexbox inside grid prevents link clicks in mobile Chromium browser

evaogbe commented 1 week ago

Version

1.48.2

Steps to reproduce

Clone my repo https://github.com/evaogbe/playwright-intercept-bug
Run npm install
Run npm test

Expected behavior

All tests for all device types pass

Actual behavior

The mobile Chromium test will fail, while all other pass.

Desktop Chromium works and other mobile device types work, but not mobile Chromium.

Additional context

When the site is using a flexbox inside a grid column with a span, the flex-auto element will intercept click events to other links inside the flexbox. This prevents the mobile Chromium browser from being able to successfully click the link even though it is visible, enabled, and stable.

Environment

System:
    OS: macOS 15.0
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 20.68 MB / 16.00 GB
  Binaries:
    Node: 20.11.0 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 10.9.0 - /usr/local/bin/npm
  IDEs:
    VSCode: 1.95.2 - /usr/local/bin/code
  Languages:
    Bash: 3.2.57 - /bin/bash
  npmPackages:
    @playwright/test: ^1.48.2 => 1.48.2

pavelfeldman commented 6 days ago

I'm opening your page in Chrome, enable mobile emulation and it looks broken (body size is off). Did you try opening it on a real device?

evaogbe commented 6 days ago

I haven't tried it on a real mobile Chrome browser, but when I run it through the mobile emulator, it works. Also the screenshot for the test shows the link is there. What do you mean by the body size is off?

pavelfeldman commented 6 days ago

When I use Chrome DevTools to emulate mobile, About button is outside of the body.

evaogbe commented 6 days ago

What do you mean by the button being outside the body? Outside the body HTML tag? The link to the About page is showing inside the body tag for me. When I click the link, it goes to the about page. The tests that clicks on the link works for every browser except mobile Chromium. When I remove the flexbox or the grid, it works on mobile Chromium.

pavelfeldman commented 6 days ago

Enable mobile emulation. If you see About, hover over body in elements panel to highlight it.

evaogbe commented 6 days ago

Oh ok I understand now. When I change the body width to 200% so that it covers the About link, mobile Chromium still fails.

pavelfeldman commented 6 days ago

I think you need to fix your page layout. Body 200% does not sound right. I'll close the bug.

evaogbe commented 6 days ago

It's definitely a bug if it works in every browser except mobile chromium. Body 200% was just to test if covering the body was the culprit, which it was not. I wasn't going to truly do body 200% for my app.

microsoft / playwright