can't click on some rotated buttons

[zepatrik]

Current behavior:

I have two buttons, basically the exact same, one rotated with transform: rotate(90deg); and one -90deg. Cypress can't click on the one with -90deg rotation, showing:

CypressError: Timed out retrying: cy.click() failed because the center of this element is hidden from view:

<button tabindex="0" class="MuiButtonBase-root-74 MuiIconButton-root-68" type="button" data-testid="test-SettingsDialog/4/Handler 1/down" style="transform: rotate(-90deg);">...</button>

The problem seems to be that the scrolling to this button is not working. .scrollIntoView() is not working as well. It is always off by some small constant amount. If the viewport is big enough that no scrolling is possible it also works to click both buttons.

I also tried recreating this with two buttons only and it works there. So seems to be related to some parents/their styles.

Desired behavior:

Steps to reproduce: (app code and test code)

Check out the repository here.

Versions

current cypress version (3.1.3) on Linux (not tested on other OS)

[jennifer-shehane]

The rotation of the button doesn't seem to be the effecting DOM element, but the set 1000px height is what is causing the button to scroll underneath a clickable area.

If you remove the 1000px height from the two divs surrounding the #root element, both tests pass.

Would have to investigate more on why this is not working in this situation

[zepatrik]

Of course the tests pass then because there is nowhere to scroll to, the buttons are then both in the viewport all the time. I just removed the other content of the website because it is irrelevant.

[jennifer-shehane]

I'm no longer able to recreate this issue. The tests pass for the example provided. Closing as resolved.

If you're experiencing a bug similar to this in Cypress, please open a new issue with a fully reproducible example that we can run. There may be a specific edge case with the issue that we need more detail to fix.