visible button in a sticky element in a modal is detected as not visible

Current behavior

I have a button inside a sticky element in a modal. Behind the modal is a scrollable element which is an ancestor of the modal. Cypress thinks that the button is not visible. I get the following error message:

This element <button#button> is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: hidden, scroll or auto

Here is the screenshot of the failing test:

Desired behavior

I can see the button. Cypress should recognize that it is visible.

Test code to reproduce

I have a simple example which reproduces this error. You can find it here: https://github.com/FraKraBa/cypress-test-tiny

Versions

Cypress 6.4.0

[bahmutov]

Released in v7.0.0

[FraKraBa]

I debugged a little bit and found the following suspicious function:

const elOrAncestorIsFixed = function ($el) {
    const $stickyOrFixedEl = $elements.getFirstFixedOrStickyPositionParent($el);

    if ($stickyOrFixedEl) {
       return $stickyOrFixedEl.css('position') === 'fixed'; // we are sticky => returns false
    }
};

In the case presented the button is inside a sticky element. Thus, elOrAncestorIsFixed returns false. Afterwards elIsOutOfBoundsOfAncestorsOverflow is called and tells that the button is not inside its ancestor Details which has overflow:scroll. However, between the button and Details is the modal which hat the property position:fixed.