cy.get({element}) causes page content to shift upward under a sticky header.

Current behavior:

cy.get({element}) causes page to shift upward under sticky header.

On our entire site we’ve added an absolute positioned sticky header and now every cy.get(element) is causing the entire content of the page to shift upward under the header. This is preventing the clicking of dropdowns and menu items or even grid records. Everything we run the cy.get() on jumps to the top of the iframe. This shift cannot be reproduced locally outside of cypress. Using a click({force:true}) does not solve the issue as the element must be visible to work.

Desired behavior:

A cy.get() should not shift the page in any way whatsoever.

Steps to reproduce: (app code and test code)

We have a toolbar at the top of the entire site.

.top-nav {
    background-color: $top-nav-background-color;
    color: $top-nav-icons;
    height: $top-nav-bar-height;
    line-height: calc(#{$top-nav-bar-height} - 2px);
    width: 100%;
    z-index: 5;
    top: 0;
    left: 0;
    position: absolute;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

At the initial cy.get to click the View button and select view filters, the page shifts and the button becomes obstructed. Even when using { force: true } the dropdown filter menu will not appear.

Versions

Cypress 3.4.1 Chrome 78 Angular 8 site

[xtrinch]

@jennifer-shehane In my case it actually shifts a dropdown inside a modal upward, causing the modal to close upon clicking on the dropdown.

Although if I put a pause in the test, the dropdown is in its correct place, but cypress somehow clicks where the time travel shows the dropdown to be, causing the modal to close.

I can also visually see it shift up during the tests, not just in the snapshots.

Putting force: true inside the click fixes my issue completely though.

[xtrinch]

@AshwinBhatkal-Harness Afraid not