Element can't be queried when there is `position: sticky` element and `html` tag has `scroll-behavior: smooth`

dakur commented 2 years ago

Current behavior

When html tag has scroll-behavior: smooth and there is a sticky positioned element in the page (e.g. header), an element can't be queried. Test ends with TypeError: Timed out retrying after 4050ms: $el.get(...).scrollIntoView is not a function

Desired behavior

To pass the test. When you remove the scroll-behavior: smooth rule, it passes.

Test code to reproduce

test:

cy.visit('index.html');
cy.get('#gotoh2').click();

tested HTML:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        html {
            scroll-behavior: smooth;
        }
        header {
            position: sticky;
            top: 0;
            height: 3rem;
            background-color: aqua;
        }
        article h1,
        article h2 {
            scroll-margin-top: 10rem;
        }
    </style>
</head>
<body>
    <header>
        LOGO
    </header>
    <article>
        <h1 id="heading1">Heading 1</h1>
        <div><a id="gotoh2" href="#heading2">Go to Heading 2</a></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis arcu lacus. Fusce maximus quis enim aliquet vehicula. Sed consectetur odio lorem, in ullamcorper ex maximus sit amet. Etiam pellentesque placerat dui. Sed tincidunt lorem eu faucibus volutpat. Aliquam justo purus, vehicula non fringilla ut, rutrum et nunc. Donec quis elit nunc. Mauris vel varius tortor. Proin et sapien nec tellus varius bibendum at ac lacus. Nullam quam diam, gravida sit amet nisl sit amet, laoreet vulputate ante. Nam ornare augue arcu, eu tincidunt purus rhoncus et. Morbi finibus, neque et commodo vestibulum, quam neque iaculis ante, accumsan auctor dui lorem sit amet dui. Suspendisse tempus quam et libero cursus dapibus. Etiam lobortis lacus eu dui tempor, id sagittis eros hendrerit.</p>
        <p>Vestibulum vitae lectus mattis, lobortis orci eget, ultricies lorem. Vestibulum at magna rhoncus, sodales nunc ut, luctus eros. Fusce rhoncus augue at rhoncus varius. Aenean iaculis eget tortor ut cursus. Ut ultricies sem ut neque dignissim convallis. Quisque id magna suscipit, luctus purus blandit, elementum metus. Nam sit amet hendrerit quam. Pellentesque in odio sed ex placerat suscipit ut vel leo. Proin accumsan nec enim vitae suscipit. Vivamus iaculis ipsum dui. Nam blandit ante eget quam mollis, a lobortis nisl blandit. Aliquam ut euismod nunc. Praesent non eros nec mi cursus interdum eu quis enim. Proin magna nisl, maximus eget massa in, semper iaculis lectus. Maecenas est risus, euismod ut aliquet in, accumsan et ligula. Sed facilisis malesuada nunc non laoreet.</p>
        <p>Ut felis turpis, placerat ut interdum ut, mollis vel ante. Aenean eu velit dignissim, pellentesque metus nec, fermentum quam. Duis quis malesuada felis. Duis vestibulum, nisl eget ornare iaculis, eros nunc fringilla massa, eu scelerisque ex odio a turpis. In et pellentesque elit. Donec imperdiet vehicula suscipit. Praesent rhoncus orci metus, sit amet venenatis elit suscipit at. In gravida lobortis lacus sed posuere. Suspendisse sit amet quam quis eros bibendum ornare sit amet nec diam. Aliquam feugiat luctus est non placerat.</p>
        <p>Nam in tellus dictum, venenatis mi aliquam, euismod odio. Vestibulum dignissim quis urna at aliquam. Quisque tellus urna, interdum a pharetra non, consectetur vitae urna. Sed fermentum maximus odio tincidunt tempor. Vestibulum hendrerit tortor turpis, ut fermentum metus viverra id. Praesent non facilisis lectus, ut feugiat purus. Praesent ornare magna lacus, ac consectetur massa lobortis et. Quisque ut varius dolor, quis posuere ex. Integer varius orci at arcu ornare congue. Donec dictum eros vitae sapien elementum auctor. Nulla facilisi. Mauris eleifend dolor at nulla commodo suscipit sit amet id nibh. Curabitur dignissim, eros ac varius porta, elit lorem tincidunt quam, in commodo velit turpis et erat. In hac habitasse platea dictumst. Ut viverra porttitor augue.</p>
        <p>Donec quis pellentesque felis. Praesent blandit nunc et diam iaculis interdum. Vestibulum ornare condimentum iaculis. Ut purus massa, iaculis sit amet facilisis et, faucibus id augue. Sed faucibus sagittis rutrum. Aliquam accumsan, odio in euismod dignissim, nunc dolor congue nisl, vitae varius lorem lorem vitae nibh. Curabitur lorem urna, placerat vel efficitur ut, ullamcorper id purus. Integer vehicula ligula id tempus lacinia. Mauris pretium maximus purus quis volutpat. Mauris neque nulla, finibus eget laoreet sit amet, viverra eget dolor. Ut consectetur bibendum blandit.</p>
        <p>Ut at ipsum non urna volutpat mattis in sit amet ipsum. Nam ac nibh sodales, dictum diam a, mollis nisi. Praesent vel facilisis lacus, vitae bibendum nibh. Cras sit amet est tincidunt, vestibulum tellus nec, sagittis est. Ut non turpis posuere, ultricies ipsum vel, efficitur metus. In vitae libero eget nisi molestie varius. Suspendisse iaculis euismod felis, quis egestas risus pretium quis. Nullam congue justo varius enim varius bibendum. Vivamus semper consectetur nibh vitae rhoncus. Ut nunc velit, pretium non quam non, semper ultricies dui. Sed elit ipsum, interdum at ligula vel, ultrices sollicitudin mauris. Duis eleifend quis lacus ut tempus. Nunc volutpat mi nulla, in ultrices elit convallis quis. Etiam ac porta velit, vel pellentesque orci.</p>
        <p>Proin posuere molestie vestibulum. Curabitur nec euismod nulla. Pellentesque vel quam erat. Phasellus porta id ex eget placerat. Sed at ipsum elementum, dictum orci quis, elementum quam. Nunc consequat enim eu risus elementum placerat. Praesent non mollis sem, dapibus ornare eros. Praesent vestibulum tortor sed dapibus porttitor. Vestibulum auctor, ligula eu aliquet sagittis, nunc turpis ultrices tellus, a tincidunt lorem augue ac mi. Curabitur ac interdum ex, quis bibendum turpis. Maecenas non porttitor dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
        <p>Vestibulum lacinia enim lobortis eros vulputate, at rutrum nibh gravida. Mauris sagittis, odio eget interdum dictum, orci massa imperdiet magna, a porta neque mauris nec ipsum. Nunc efficitur, eros non dictum fermentum, libero urna semper lorem, ut sodales sapien purus vel lorem. Aenean euismod blandit urna vitae dictum. Fusce non tempus felis. Aenean consequat mattis orci. Suspendisse quis maximus sem, in hendrerit est. Aenean sit amet lectus imperdiet, dictum enim et, sagittis quam. Fusce dignissim viverra nulla, nec commodo purus rhoncus id. Suspendisse vitae vehicula quam. Integer quis libero orci. Maecenas venenatis diam quis eros maximus pulvinar. Nam id nibh blandit, semper ante scelerisque, mollis nibh. Pellentesque lacinia tempor varius.</p>
        <p>Mauris ut lacus mauris. Donec lobortis lorem sed mauris dapibus, sit amet gravida ipsum pulvinar. Pellentesque vitae ante diam. Sed ac felis posuere, ultricies diam id, varius nisi. Sed elementum convallis libero, vel venenatis enim. Nunc velit risus, ultrices in pulvinar ac, pharetra non lorem. Quisque faucibus aliquet leo eget gravida. Fusce efficitur suscipit neque ac pharetra. Fusce id bibendum magna. Ut magna leo, consectetur quis velit et, sodales suscipit ipsum. Sed vel lacus nec tellus consectetur mattis. Donec hendrerit malesuada nulla. Aenean et nisl ut erat suscipit posuere ac quis mauris. Sed interdum mollis nibh, sed tincidunt lectus eleifend vitae. Sed fermentum laoreet mi, id viverra libero lacinia nec.</p>
        <p>In eros ipsum, auctor eu tortor eu, faucibus dictum lorem. Maecenas cursus dui in commodo suscipit. Pellentesque varius sed nisi at efficitur. Etiam placerat arcu sed ultricies dignissim. In ultricies molestie enim, nec luctus magna. Pellentesque id auctor ligula, sit amet scelerisque lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
        <h2 id="heading2">Heading 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis arcu lacus. Fusce maximus quis enim aliquet vehicula. Sed consectetur odio lorem, in ullamcorper ex maximus sit amet. Etiam pellentesque placerat dui. Sed tincidunt lorem eu faucibus volutpat. Aliquam justo purus, vehicula non fringilla ut, rutrum et nunc. Donec quis elit nunc. Mauris vel varius tortor. Proin et sapien nec tellus varius bibendum at ac lacus. Nullam quam diam, gravida sit amet nisl sit amet, laoreet vulputate ante. Nam ornare augue arcu, eu tincidunt purus rhoncus et. Morbi finibus, neque et commodo vestibulum, quam neque iaculis ante, accumsan auctor dui lorem sit amet dui. Suspendisse tempus quam et libero cursus dapibus. Etiam lobortis lacus eu dui tempor, id sagittis eros hendrerit.</p>
        <p>Vestibulum vitae lectus mattis, lobortis orci eget, ultricies lorem. Vestibulum at magna rhoncus, sodales nunc ut, luctus eros. Fusce rhoncus augue at rhoncus varius. Aenean iaculis eget tortor ut cursus. Ut ultricies sem ut neque dignissim convallis. Quisque id magna suscipit, luctus purus blandit, elementum metus. Nam sit amet hendrerit quam. Pellentesque in odio sed ex placerat suscipit ut vel leo. Proin accumsan nec enim vitae suscipit. Vivamus iaculis ipsum dui. Nam blandit ante eget quam mollis, a lobortis nisl blandit. Aliquam ut euismod nunc. Praesent non eros nec mi cursus interdum eu quis enim. Proin magna nisl, maximus eget massa in, semper iaculis lectus. Maecenas est risus, euismod ut aliquet in, accumsan et ligula. Sed facilisis malesuada nunc non laoreet.</p>
        <p>Ut felis turpis, placerat ut interdum ut, mollis vel ante. Aenean eu velit dignissim, pellentesque metus nec, fermentum quam. Duis quis malesuada felis. Duis vestibulum, nisl eget ornare iaculis, eros nunc fringilla massa, eu scelerisque ex odio a turpis. In et pellentesque elit. Donec imperdiet vehicula suscipit. Praesent rhoncus orci metus, sit amet venenatis elit suscipit at. In gravida lobortis lacus sed posuere. Suspendisse sit amet quam quis eros bibendum ornare sit amet nec diam. Aliquam feugiat luctus est non placerat.</p>
        <p>Nam in tellus dictum, venenatis mi aliquam, euismod odio. Vestibulum dignissim quis urna at aliquam. Quisque tellus urna, interdum a pharetra non, consectetur vitae urna. Sed fermentum maximus odio tincidunt tempor. Vestibulum hendrerit tortor turpis, ut fermentum metus viverra id. Praesent non facilisis lectus, ut feugiat purus. Praesent ornare magna lacus, ac consectetur massa lobortis et. Quisque ut varius dolor, quis posuere ex. Integer varius orci at arcu ornare congue. Donec dictum eros vitae sapien elementum auctor. Nulla facilisi. Mauris eleifend dolor at nulla commodo suscipit sit amet id nibh. Curabitur dignissim, eros ac varius porta, elit lorem tincidunt quam, in commodo velit turpis et erat. In hac habitasse platea dictumst. Ut viverra porttitor augue.</p>
        <p>Donec quis pellentesque felis. Praesent blandit nunc et diam iaculis interdum. Vestibulum ornare condimentum iaculis. Ut purus massa, iaculis sit amet facilisis et, faucibus id augue. Sed faucibus sagittis rutrum. Aliquam accumsan, odio in euismod dignissim, nunc dolor congue nisl, vitae varius lorem lorem vitae nibh. Curabitur lorem urna, placerat vel efficitur ut, ullamcorper id purus. Integer vehicula ligula id tempus lacinia. Mauris pretium maximus purus quis volutpat. Mauris neque nulla, finibus eget laoreet sit amet, viverra eget dolor. Ut consectetur bibendum blandit.</p>
        <p>Ut at ipsum non urna volutpat mattis in sit amet ipsum. Nam ac nibh sodales, dictum diam a, mollis nisi. Praesent vel facilisis lacus, vitae bibendum nibh. Cras sit amet est tincidunt, vestibulum tellus nec, sagittis est. Ut non turpis posuere, ultricies ipsum vel, efficitur metus. In vitae libero eget nisi molestie varius. Suspendisse iaculis euismod felis, quis egestas risus pretium quis. Nullam congue justo varius enim varius bibendum. Vivamus semper consectetur nibh vitae rhoncus. Ut nunc velit, pretium non quam non, semper ultricies dui. Sed elit ipsum, interdum at ligula vel, ultrices sollicitudin mauris. Duis eleifend quis lacus ut tempus. Nunc volutpat mi nulla, in ultrices elit convallis quis. Etiam ac porta velit, vel pellentesque orci.</p>
        <p>Proin posuere molestie vestibulum. Curabitur nec euismod nulla. Pellentesque vel quam erat. Phasellus porta id ex eget placerat. Sed at ipsum elementum, dictum orci quis, elementum quam. Nunc consequat enim eu risus elementum placerat. Praesent non mollis sem, dapibus ornare eros. Praesent vestibulum tortor sed dapibus porttitor. Vestibulum auctor, ligula eu aliquet sagittis, nunc turpis ultrices tellus, a tincidunt lorem augue ac mi. Curabitur ac interdum ex, quis bibendum turpis. Maecenas non porttitor dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
        <p>Vestibulum lacinia enim lobortis eros vulputate, at rutrum nibh gravida. Mauris sagittis, odio eget interdum dictum, orci massa imperdiet magna, a porta neque mauris nec ipsum. Nunc efficitur, eros non dictum fermentum, libero urna semper lorem, ut sodales sapien purus vel lorem. Aenean euismod blandit urna vitae dictum. Fusce non tempus felis. Aenean consequat mattis orci. Suspendisse quis maximus sem, in hendrerit est. Aenean sit amet lectus imperdiet, dictum enim et, sagittis quam. Fusce dignissim viverra nulla, nec commodo purus rhoncus id. Suspendisse vitae vehicula quam. Integer quis libero orci. Maecenas venenatis diam quis eros maximus pulvinar. Nam id nibh blandit, semper ante scelerisque, mollis nibh. Pellentesque lacinia tempor varius.</p>
        <p>Mauris ut lacus mauris. Donec lobortis lorem sed mauris dapibus, sit amet gravida ipsum pulvinar. Pellentesque vitae ante diam. Sed ac felis posuere, ultricies diam id, varius nisi. Sed elementum convallis libero, vel venenatis enim. Nunc velit risus, ultrices in pulvinar ac, pharetra non lorem. Quisque faucibus aliquet leo eget gravida. Fusce efficitur suscipit neque ac pharetra. Fusce id bibendum magna. Ut magna leo, consectetur quis velit et, sodales suscipit ipsum. Sed vel lacus nec tellus consectetur mattis. Donec hendrerit malesuada nulla. Aenean et nisl ut erat suscipit posuere ac quis mauris. Sed interdum mollis nibh, sed tincidunt lectus eleifend vitae. Sed fermentum laoreet mi, id viverra libero lacinia nec.</p>
        <p>In eros ipsum, auctor eu tortor eu, faucibus dictum lorem. Maecenas cursus dui in commodo suscipit. Pellentesque varius sed nisi at efficitur. Etiam placerat arcu sed ultricies dignissim. In ultricies molestie enim, nec luctus magna. Pellentesque id auctor ligula, sit amet scelerisque lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</article>
</body>
</html>

Cypress Version

9.5.1

Other

This is probably the same issue as #19038 which has been closed as not being an issue for the issuer anymore. Also probably related to #3200, but that fix didn't count with position: sticky. I've run into this issue when upgraded bootstrap v4 to v5 which has that style rule applied.

byrond commented 2 years ago

We ran into this issue as well. For us, the failure happened on CI using yarn cypress run, but our tests would pass when using yarn cypress open. We fixed it with the workaround in #3200, by adding the following after cy.visit:

cy.document().then(document => {
    const htmlElement = document.querySelector('html');
    if (htmlElement) {
      htmlElement.style.scrollBehavior = 'inherit';
    }
  });

https://github.com/cypress-io/cypress/issues/3200#issuecomment-757994356

We thought it strange that we were still experiencing that issue, since it was fixed in 6.7.1. We saw the problem on 9.5.4 as well as 10.3.0.

cypress-app-bot commented 1 year ago

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

dakur commented 1 year ago

Don't close, I'll check it first.

dakur commented 1 year ago

I still experience this with cypress 12.12.0.

nagash77 commented 1 year ago

@dakur thank you for confirming. I will update the ticket accordingly.

warrensplayer commented 1 year ago

@dakur I reproduced this using this repo (https://github.com/warrensplayer/cypress_20607) with the latest version of Cypress and will forward this ticket to the appropriate team. They will soon evaluate the priority of this ticket and consider their capacity to pick it up. Please note that this does not guarantee that this issue will be resolved. The ticket will indicate status changes during evaluation, so we ask that you please refrain from asking for updates. Thanks!

cypress-io / cypress