vue-lazy-hydration icon indicating copy to clipboard operation
vue-lazy-hydration copied to clipboard

Causes scroll jumps when going back and forward in browser

Open kedrzu opened this issue 4 years ago • 2 comments
trafficstars

I use this library along with Nuxt and basic vue-router in SSR / static mode.

Reproduce steps:

  1. Render page. Everythings loads fine (statically), lazy hydration works perfectly.
  2. Scroll somewhere down.
  3. Go to some other page. This is standard SPA navigation to some other page using vue-router. Still works like charm.
  4. Click back in your browser.

And here's the deal: when going back, vue-router tries to scroll user to the same position he was before. But lazy-hydrate works basing on Promise now, and that causes a slight delay in component rendering. So at the time router scrolls down, components are not rendered yet. Effectively, you land on the bottom of the page (or in some other bad place).

The previous version (v1) worked differently, basing on some Virtual DOM hacks. The problem does not appear there.

kedrzu avatar Feb 02 '21 14:02 kedrzu

Thank you for your detailed issue report. Still, providing a reproduction app (CodeSandbox or GitHub repo) would make it easier for me to work on this, which will make it more likely that I'll work on this sooner.

maoberlehner avatar Feb 02 '21 16:02 maoberlehner

I made a fix for the issue: https://github.com/maoberlehner/vue-lazy-hydration/pull/113 I use it in a production application and works like charm. Can you take a look?

kedrzu avatar Oct 15 '21 07:10 kedrzu