cypress: [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 = 'fake@email.com'
    const password = 'yourPassword'

    cy.visit('https://secure.vidyard.com/user/sign_in')
    cy.get('#username').type(email)
    cy.get('#next-login').click()
    cy.get('#password').type(password)
    cy.get('#sign-in').click()
    // Uncomment the line below if you see the "New limits on your Free account" modal.
    // cy.get('.close > .fal').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.