router icon indicating copy to clipboard operation
router copied to clipboard

Smooth scrolling does not work in firefox but does in chrome

Open lxgr-linux opened this issue 3 years ago • 2 comments

Version

4.0.15

Reproduction link

github.com

Steps to reproduce

Run the reproduction scroll down and press the link titled link.

What is expected?

It is expected that the current page is changed to the test page and is smoothly scrolled to the top.

What is actually happening?

In firefox the current page switches to the test page, but does not scroll up.


Works in chrome. Removing the behavior: 'smooth' makes the test page at least start on top, but also removes the intended scroll effect.

lxgr-linux avatar May 19 '22 22:05 lxgr-linux

hmm, this is weird, it could be a Firefox regression similar to https://github.com/vuejs/router/issues/1147. It would require checking which version broke and why:

At least there is a very easy workaround: delay one tick the resolution of the scrollBehavior:

const delay = (t) => new Promise((r) => setTimeout(r, t))

const router = createRouter({
  history: createWebHashHistory(),
  // history: createWebHistory(),
  routes,
  async scrollBehavior(to, from, savedPosition) {
    console.log({ savedPosition })
    if (savedPosition) {
      return savedPosition
    } else {
      await delay(0)
      return { top: 0, behavior: 'smooth' }
    }
  },
})

posva avatar May 20 '22 07:05 posva

Thanks a lot for the workaround.

lxgr-linux avatar May 20 '22 07:05 lxgr-linux