[Regression] Element actionability fails because it is scrolled behind another element.

Current behavior

After upgrading to Cypress 6.8.0, we are experiencing test failures as a result of elements not being able to be clicked due to being covered by another element. It seems likely that this is a regression related to changes made for #3200 .

Desired behavior

Tests pass exactly as they did in our prior Cypress version, 6.6.0.

Test code to reproduce

context('Cypress Issue', function () {

  beforeEach(function () {

    // These are not real credentials.
    // Please sign up (for free) at www.vidyard.com, verify your email address, then update these accordingly.

    const email = '[e-mail]'
    const password = 'yourPassword'

    cy.visit('https://secure.vidyard.com/user/sign_in')
    cy.get('#username').type(email)
    cy.get('#password').type(password)
    cy.get('#sign-in').click()
    cy.wait(5000) // Just to make sure the page is fully loaded.
  })

  it('Click Issue caused by Visibility', function () {
    cy.get('[data-testid=folder-navigation]')
      .click();
  });
});

Fails in Cypress version 6.8.0.

Passes in Cypress version 6.6.0.

Additional Notes

It looks like adding the workaround proposed to avoid issue #3200 actually works around this problem too, but (at least in the case of my application) this is a worse experience because we have to use the workaround everywhere and not just in certain places as had previously been the case. 😞

    cy.document().then((document) => {
      const node = document.createElement('style');
      node.innerHTML = 'html { scroll-behavior: auto !important; }';
      document.body.appendChild(node);
    });

Versions

Cypress version 6.8.0 on macOS in Chrome 89 and Firefox 86.

[trev125]

@todd-m-kemp Thank you for adding that work around! That seems to have fixed things for me temporarily, and it was such a weird thing to see.

[todd-m-kemp]

@jennifer-shehane suggested in an earlier comment that I look into the scrollBehavior option on click but initially I wasn’t terribly interested since I didn’t want to have to explicitly provide this option on all calls to click because this was a very broad problem causing failures in nearly every test of ours. However, yesterday I stumbled across the scrollBehavior option in cypress.json where you can set it globally. I did so, and this problem doesn’t seem to occur in our test runs when using center as the scrollBehavior setting. Those of you experiencing this problem may also want to give that a try.