Cypress test fails with "this element is being covered by another element" though it is not

Current behavior

The upgrade of cypress-realworld-app from MUI v4 to MUI v5 seems to reveal an issue with the coverage calculation, such that Cypress believes an element cannot be clicked because it is being covered by another element, despite that in the viewport displayed in-cypress, no such coverage is occurring, and upon manual reproduction no such coverage occurs either.

Desired behavior

If a manual visit to the webpage results in an element being not-covered, then the cypress test should not consider the element covered and allow interaction with it without needing to specify { force: true }.

Test code to reproduce

The bug is reproducible in the ui/transaction-view.spec.ts test in the mobile viewport from this PR: https://github.com/cypress-io/cypress-realworld-app/pull/1522 at this commit: https://github.com/cypress-io/cypress-realworld-app/pull/1522/commits/8c67acbdd4572af84600ca7fd42fd8042ce8414d

So, to reproduce: git clone git@github.com:cypress-io/cypress-realworld-app.git git checkout 8c67acbdd4572af84600ca7fd42fd8042ce8414d yarn install yarn build yarn dev

in another terminal: yarn cypress:open:mobile Click "E2E Testing" Click "Start E2E Testing in Chrome" Click on the test "ui/transaction-view.spec.ts"

The test "transactions navigation tabs are hidden on a transaction view page" fails with this error:

Timed out retrying after 4050ms: cy.click() failed because this element:

<li class="MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-alignItemsFlexStart css-1v18wys-MuiListItem-root" data-test="transaction-item-J5Fd3dlBEBu">...</li>

is being covered by another element:

<a class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit css-u7g6hc-MuiButtonBase-root-MuiTab-root" tabindex="-1" role="tab" aria-selected="false" data-test="nav-contacts-tab" href="/contacts">...</a>

However, the browser pane on the right shows that the <li> element is not in fact covered by the <a> element.

Moreover, quitting the Cypress app and visiting http://localhost:3000/ in a browser with a narrowed viewport and logging in as Heath93/s3cret, then clicking on the "Mine" tab as the test does also shows the <li> element not covered by the <a> element.

Cypress Version

13.12.0

Node version

v18.19.0

Operating System

MacOS 13.5.1

Debug Logs

I will attach the debug logs as a file if I can after the issue is filed.  Otherwise I get an error trying to file the issue because the body is too long.

Other

It does appear that with this mobile viewport size, a vertical scrollbar for the viewport appears and a vertical scrollbar for the transaction list also appears.

cypress-io / cypress