Anchor links broken when navigating across pages

[mikenikles]

Describe the bug

I upgraded to next.188 yesterday and notice anchor links no longer work across pages.

Steps to reproduce

1. Navigate to https://deploy-preview-1131--gitpod-kumquat.netlify.app/blog
2. Click "Sign up" at the top right

Actual result
The homepage loads, scrolled to the top

Expected result
The homepage loads, scrolled down to the Get Started Now section.

Note, if you click "Sign Up" again after step 2 (i.e. when you're on the homepage), the anchor link works.

Has anyone else seen this? I've been looking through Discord and GitHub, not much luck so far but will continue to search.

Reproduction

1. npm init svelte@next & follow the instructions
2. In src/routes/index.html add a bunch of <br /> elements to make the page scrollable, then add <h1 id="jump-here">Here is a page anchor</h1> at the bottom of the page
3. In src/routes/about.html add a link: <a href="/#jump-here">Jump to section on homepage</a>

Logs

No response

System Info

System:
    OS: macOS 11.2.3
    CPU: (8) x64 Apple M1
    Memory: 136.04 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.4 - /usr/local/bin/node
    npm: 7.7.6 - /opt/homebrew/bin/npm
  Browsers:
    Brave Browser: 94.1.30.87
    Chrome: 95.0.4638.54
    Edge: 93.0.961.47
    Firefox: 92.0
    Firefox Developer Edition: 88.0
    Safari: 14.0.3
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.188 
    svelte: ^3.34.0 => 3.44.0

Severity

blocking an upgrade

Additional Information

No response

[rosslh]

I noticed this on my personal website and had to add a workaround here. If SvelteKit caused this, the bug was introduced between 1.0.0-next.185 and 1.0.0-next.187 (inclusive).

[mikenikles]

Nice, thanks for narrowing this down to these versions - and for posting the workaround 🙏.

I'm about to debug the SvelteKit source code to figure out what exactly causes it. I'm going to start my investigation around here (diff).

Will report back with findings.

[rosslh]

Actually I think I was wrong about the versions. The first version of my site with the issue appears to be rosslh/rosshill.ca@d4834d4, so the bug must have been introduced between and 1.0.0-next.169 and 1.0.0-next.179

[mikenikles]

Alright, https://github.com/sveltejs/kit/blob/master/packages/kit/src/runtime/client/renderer.js#L285 returns null when I debug the code.

Once navigation completes, the document.getElementById() call returns the expected element.

👀

[mikenikles]

Found a fix 🎉. PR incoming

[mikenikles]

FYI for anyone else blocked by this. Inspired by @rosslh, I ended up adding the following to __layout.svelte to unblock myself until the PR gets merged.

$: if ($page.path) {
  // Workaround until https://github.com/sveltejs/kit/issues/2664 is fixed
  if (typeof window !== "undefined" && window.location.hash) {
    const deepLinkedElement = document.getElementById(
      window.location.hash.substring(1)
    );
    if (deepLinkedElement) {
      deepLinkedElement.scrollIntoView();
    }
  }
}

[mquandalle]

I have updated my app to use the latest version of kit (next.193), and I still experience this issue.

[mikenikles]

With next.193, here's what I experience...

Setup

• a.svelte contains my anchor
• b.svelte links to a.svelte

❌ Does not work

1. Navigate to /b
2. Click on link to /a
3. /a is scrolled to the top, not the anchor

✅ Does work

1. Navigate to /b
2. Reload the page twice (yep, 2 times)
3. Click on link to /a
4. /a scrolls to the anchor as expected

@mquandalle could you try to reload the page twice in your project and let me know that I'm not crazy 😕?! If you see the same, I'd feel a bit better - although can't explain why it happens.