router
router copied to clipboard
Smooth scrolling does not work in firefox but does in chrome
Version
4.0.15
Reproduction link
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.
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' }
}
},
})
Thanks a lot for the workaround.