Cypress: Sticky elements within a fixed container are not properly taken into account when scrolling to an element

Created on 17 May 2019 · 10Comments · Source: cypress-io/cypress

Current behavior:

This bug is related to #565 / #571

A typical use case for fixed containers are modals which fully overlay an application. In our case the fixed container is used to dim the application while displaying a modal or side panel within said container. The content within the dimmed overlay container is scrollable, but the container itself is not. I was able to break the test for #565 by making minimal adjustments to the fixture, which is included in the test repo.

As soon as a sticky element is nested within a fixed container, Cypress scrolls the element too far, so it ends up below the sticky header.

sticky elements -- additional example with side panel -- can click the first tr (failed)
sticky elements -- issue 565571 with updated fixture -- can click the first tr (failed)

Desired behavior:

Cypress should take sticky headers into account when scrolling, even when they are within a fixed element and clicking on an element should succeed.

Steps to reproduce: (app code and test code)

A repo (based on https://github.com/cypress-io/cypress-test-tiny) containing two failing test cases can be found at https://github.com/johanneslumpe/cypress-sticky-header-bug

Versions

Cypress 3.3.0
Chrome 74
Mac OS

┆Issue is synchronized with this Jira Bug by Unito

internal-priority pkdriver ready for work cy.click 🖱 scrolling ↕️ visibility 👁 bug

Source

johanneslumpe

👍10 😕2 👀1

Most helpful comment

Looking for updates or workarounds on this please 🙏
Any other tips for handling sticking elements?

getulionm on 12 Aug 2020

👍2

All 10 comments

ShonP on 1 Jun 2019

I have the same problem with a sticky element. Please, I need to resolve this and any help all be helpful.

asam139 on 16 Dec 2019

Still relevant in 3.8.2

Moke96 on 15 Jan 2020

I'm definitely still seeing issues with cypress scrolling elements under a sticky header.

tnrich on 23 Jan 2020

Related to #871 . Lots of people (including me) having trouble with elements getting scrolled under a sticky header and thus not visible.

KatieMFritz on 8 Apr 2020

The first example provided here is actually not a bug. The container is not scrollable - there's no way to click on the 'a' element in the example outside of Cypress.

index.html: https://raw.githubusercontent.com/johanneslumpe/cypress-sticky-header-bug/5fd91e18000604c632556754b8c8a8f366ab79af/cypress/fixtures/issue-565-updated.html

it('can click the first tr', () => {
  cy.viewport(400, 400)
  cy.visit("index.html")
  cy.get("td:first").click()
})

No scrollbar available - the 'a' td is unclickable normally.

Screen Shot 2020-04-08 at 12 35 25 PM

The second example is the bug - you can scroll to the a td element normally and click the element.

Simplest code to reproduce

index.html

<!DOCTYPE html>
<html>
<body>
  <div class="overlay-background" style="position: fixed; width: 300px">
    <div class="sidepanel" style="position: absolute; height: 300px; overflow: auto;">
      <header class="sticky-header" style="position: sticky; top: 0; left: 0; height: 40px; background-color: blue;">
        sticky header
      </header>
      <div style="height: 500px">
        <p>content to scroll to</p>
      </div>
    </div>
  </div>
</body>
</html>

it('can click the p behind sticky header', () => {
  cy.viewport(400, 400)
  cy.visit('index.html')
  cy.get('p').click()
})

jennifer-shehane on 8 Apr 2020

Hi, is there any news regarding this issue?
I think I'm having some related issue aswell. My front end is under react and the dev team is using a dropdown list that pops up from the top, once the dropdown menu is clicked. This list is a fixed element and it doesn't appear anywhere within the viewport. after some debugging i've found that the list is actually spawning outside the browser window, below or above the test runner.

2020-06-22_14h06_19
here it is found below

2020-06-22_14h21_45
here it is on top

those screenshots is after clicking the dropdown button, that should trigger the list to appear.

In both cases the element is not found by cypress, even though that after clicking on the dropdown menu, the list appears in the html document.

pedroAVS on 22 Jun 2020

I have the same issue, but the frustrating thing is that the element is already visible in the page so scrolling was not necessary. Couldn't there be an option to turn off the auto-scrolling option? Or otherwise to set the fixed-height at the top when typing so that it doesn't scroll so much?

Also worth noting, in my case the scrollbar wouldn't have allowed the page to scroll as much as Cypress has scrolled it for the input box to be at 0px from the top.