Current behavior
It appears "isVisible" is incorrectly assessed for the absolutely positioned elements if the ancestor has an overflow and static position. For example, for the following document the #visible-button is considered as not-visible:
<body>
<div style="height: 200px; position: relative; display: flex">
<div style="border: 5px solid red">
<div
id="breaking-container"
style="overflow: auto; border: 5px solid green"
>
<div>
<h1>Example</h1>
<div style="position: absolute; bottom: 5px">
<button id="visible-button" style="position: relative">
Try me
</button>
</div>
</div>
</div>
</div>
</div>
</body>Here's the screenshot from the test:
It appears that in this case, while assessing the isVisible, the button goes particularly into the isHidddenByAncestors. Then while calculating the elIsOutOfBoundsOfAncestorsOverflow for the #breaking-container div element from the example, the canClipContent is incorrectly assessed. That element has a default position: static, thus does not affect the visibility of the button. However, this is not checked in the canClipContent, resulting in the incorrectly assessed visibility via calculating the button's position compared to that div.
The documentation in that particular states that:
Any of its ancestors hides overflow*
AND the element is position: relative
AND it is positioned outside that ancestor's bounds
However, as mentioned above, I think that this should be true only if the considered ancestor's position is not static.
Desired behavior
Element visibility is correctly assessed.
Test code to reproduce
Here's the repository: https://github.com/klarzynskik/cypress-visibility-issue-demo
The simplest example is the following code:
<div id="breaking-container" style="overflow: auto">
<div>
<div style="position: absolute; bottom: 5px">
<button id="visible-button">Try me</button>
</div>
</div>
</div>Cypress Version
13.6.2
Node version
18.16.1
Operating System
macOS 13.4.1
Debug Logs
No response
Other
No response
Current behavior
It appears "isVisible" is incorrectly assessed for the absolutely positioned elements if the ancestor has an overflow and static position. For example, for the following document the
#visible-buttonis considered as not-visible:Here's the screenshot from the test:
It appears that in this case, while assessing the
isVisible, the button goes particularly into the isHidddenByAncestors. Then while calculating the elIsOutOfBoundsOfAncestorsOverflow for the#breaking-containerdiv element from the example, thecanClipContentis incorrectly assessed. That element has a defaultposition: static, thus does not affect the visibility of the button. However, this is not checked in thecanClipContent, resulting in the incorrectly assessed visibility via calculating the button's position compared to that div.The documentation in that particular states that:
However, as mentioned above, I think that this should be true only if the considered ancestor's position is not static.
Desired behavior
Element visibility is correctly assessed.
Test code to reproduce
Here's the repository: https://github.com/klarzynskik/cypress-visibility-issue-demo
The simplest example is the following code:
Cypress Version
13.6.2
Node version
18.16.1
Operating System
macOS 13.4.1
Debug Logs
No response
Other
No response