Position: fixed, partially superposed divs, determined as not visible #3369
Description
Hello, I'm developing a simple mobile layout based on a side menu and a backdrop.
Backdrop has:
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
Drawer has:
position: fixed;
width: 70%;
height: 100%;
top: 0;
right: 0;
Here's the test
describe('Backdrop and side drawer layout', () => {
it('recognizes both elements as visible', () => {
cy.visit('https://507owq3644.codesandbox.io/');
cy.get('[data-testid="side-drawer"]').should('be.visible');
cy.get('[data-testid="backdrop"]').should('be.visible');
});
});Current behavior:
The test fails with the following error:
CypressError: Timed out retrying: expected '<div#backdrop>' to be 'visible'
This element '<div#backdrop>' is not visible because it has CSS property: 'position: fixed' and its being covered by another element:
<div id="side-drawer" data-testid="side-drawer">side dr...</div>
Desired behavior:
The test should recognize both elements as visible, as the drawer is only partially covering the backdrop.
Steps to reproduce: (app code and test code)
The described layout can be found here: https://codesandbox.io/s/507owq3644
The test code is included in the description.
Versions
Cypress: 3.1.5
Operating system: macOS High Sierra 10.13.6
Browser: Version 72.0.3626.96 (Official Build) (64-bit)
Thanks for your work! 👍