Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Not scrolling to top on navigation (Firefox, scroll-behavior: smooth) #9515

Closed
petrhdk opened this issue Jul 3, 2021 · 12 comments
Closed

Not scrolling to top on navigation (Firefox, scroll-behavior: smooth) #9515

petrhdk opened this issue Jul 3, 2021 · 12 comments
Labels
2.x pending triage

Comments

@petrhdk
Copy link

petrhdk commented Jul 3, 2021

Minimal reproducible code example


  • package.json: 
    {
    "scripts": {
        "dev": "nuxt"
    },
    "dependencies": {
        "core-js": "3.15.2",
        "nuxt": "2.15.7"
    }
}

  • nuxt.config.js: 
    export default {

    // Target: https://go.nuxtjs.dev/config-target
    target: 'static',

    // Auto import components: https://go.nuxtjs.dev/config-components
    components: true,

}

  • layouts/default.vue: 
    <template>
    <Nuxt />
</template>

<style>
:root {
    scroll-behavior: smooth; /* <== IMPORTANT */
}
</style>

  • pages/index.vue: 
    <template>
    <div>
        <MyComp></MyComp>
        <NuxtLink to="/other-page/">Other Page</NuxtLink>
    </div>
</template>

  • pages/other-page.vue: 
    <template>
    <MyComp></MyComp>
</template>

  • components/MyComp.vue: 
    <template>
    <div style="
        height: 150vh;
        background: repeating-linear-gradient(#163834, #629691 100px);
        border-top: 100px solid #ff0000;
        border-bottom: 100px solid #00ffe5;
    " />
</template>

Steps to reproduce

  • start dev server

    $ git clone https://github.com/pitizzzle/nuxt-bugreport-not-scrolling-to-top.git`
$ cd nuxt-bugreport-not-scrolling-to-top
$ npm install
$ npm run dev

  • open the index page (eg. http://localhost:3000/) in Firefox

  • scroll to the bottom of the index page

  • click the navigation button (pointing to /other-page/ route)

  • on the new route, the page does not scroll to the top as expected

Versions
Nuxt v2.15.7
Node v14.15.4
Browser Firefox 89.0.2 (64-Bit)
  • hint: the bug is specific to Firefox and scroll-behavior: smooth
@petrhdk
Copy link
Author

petrhdk commented Jul 12, 2021 •
edited
Loading

The :root selector is, in this case, identical to the html selector (see here).

If the html selector "worked" as expected for you, then my original :root selector should have "worked" as well. Which means, you couldn't reproduce the issue in the first place.
Is this the case?

@petrhdk
Copy link
Author

petrhdk commented Jul 12, 2021

As I expected, switching from :root to html selector did not solve the issue.

@stale
Copy link

stale bot commented Apr 27, 2022

Thanks for your contribution to Nuxt!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

  1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
  2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

@stale stale bot added the stale label Apr 27, 2022
@narduin
Copy link

narduin commented May 2, 2022 •
edited
Loading

I can confirm this bug still occurs.

Tool Version
Nuxt v2.15.8
Node v16.14.0
Firefox dev v100.0b9 (64-bit)

@stale stale bot removed the stale label May 2, 2022
@narduin narduin mentioned this issue May 2, 2022
Closed
@Extarys
Copy link

Extarys commented Jan 24, 2023

I thought I was going crazy, Works on chrome.

Tool Version
Nuxt v3.0.0
Node v16.17.0
Firefox Nightly v111.0a1 (64-bit)

@xfvelocity
Copy link

Still not working for me on Firefox.

Tool Version
Nuxt v3.5.0
Node v16.13.0
Firefox v113.0.1 (64-bit)

@dkosoko23
Copy link

Still not fixed in 2024

@danielroe
Copy link
Member

We are approaching the Nuxt 2 EOL date (June 30, 2024) - see this article for more information. This is advance warning that I'm going to close this issue then, as it's currently marked as a Nuxt 2 related bug.

If it's a critical or security issue, please do comment and let me know, in case it is possible to address it before the EOL date.

If it's a an issue you think is relevant for Nuxt 3, please feel free to open a fresh issue (or just comment here so I can update labels, etc.). 🙏

Thank you for your understanding and for your contribution to Nuxt. ❤️

@danielroe
Copy link
Member

It's the day, at last. Nuxt 2 is now marked end-of-life.

My apologies we never got round to resolving this bug in the 2.x branch, but we do have to draw a line somewhere. Again, if you think this is still relevant for Nuxt going forward, please feel free to open a fresh issue (or just comment here so I can update labels, etc.). 🙏

@JovanaMatic
Copy link

Reporting the same issue in Nuxt 3.

In our project we have footer element with various NuxtLinks that lead to different pages when clicking on them. When navigating through the links inside footer we experience the same issue described above. This issue is more visible on Firefox however it is also reproducible on Chrome and Safari browser. When navigating through routes Firefox is forcefully scrolling to the bottom of the page instead of the top of the page.
We noticed that when removing scroll-behavior: smooth; property from html, this behaviour will slightly disappear however it can still be reproduced, user can still, by clicking on links after some time, be scrolled to the bottom of the page which is not expected. When navigating to new page, user should be scrolled to the bottom of that page.

Browser versions:
Chrome: 126.0.6478.127
Firefox: Version 127.0.2
Safari: 17.5

Node version: v20.12.2
Nuxt version: 3.9.2

@danielroe
Copy link
Member

@JovanaMatic Would you raise a new issue with a reproduction? 🙏

@JovanaMatic
Copy link

Hi @danielroe opened a new issue - #28227. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
2.x pending triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@Extarys @narduin @danielroe @petrhdk @JovanaMatic @xfvelocity @dkosoko23