Setting `window.location.hash` breaks client-side navigation

Update (2024-11-03)

Seems like it's broken in Firefox only.

Tested With @sveltejs/kit@2.7.4

• ❎ Firefox 132.0 (aarch64)
• ✅ Chrome 130.0.6723.92
• ✅ Safari 18.0.1(20619.1.26.31.7)

Describe the bug

I know, window.location should not be set directly, but hope hash is an exception.

Client-side navigation to /a#hash does not show :target styling on the id="hash" element.

This is expected in client-side rendering as documented below:

• https://github.com/sveltejs/kit/issues/10550#issuecomment-1751967486

$effect(() => {
  if ($page.url.hash) window.location.hash = $page.url.hash;
});

But the above workaround is broken as documented below:

Reproduction

1. Load /
2. Click on the anchor → /a#hash
3. Press browser back → /
4. Press browser forward
   1. browser URL does change to /a#hash as expected
   2. but page stays the same (no client-side navigation)

<!-- src/routes/+page.svelte -->
<ol>
  <li>Click this <a href="/a#hash">link</a> to goto A</li>
</ol>
<ol start="3">
  <li>Click the browser's forward button</li>
</ol>

<!-- src/routes/a/+page.svelte -->

<script>
  import { page } from '$app/stores';

  $effect(() => {
    if ($page.url.hash) window.location.hash = $page.url.hash;
  });
</script>
<p>You are on A!</p>
<ol>
  <li>Now click the browser's back button</li>
</ol>

Logs

No response

System Info

System:
  OS: macOS 15.0.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 24.80 MB / 16.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 22.10.0 - ~/.local/state/fnm_multishells/86959_1730372499881/bin/node
  npm: 10.9.0 - ~/.local/state/fnm_multishells/86959_1730372499881/bin/npm
  pnpm: 9.12.3 - ~/.local/state/fnm_multishells/86959_1730372499881/bin/pnpm
Browsers:
  Chrome: 130.0.6723.70
  Edge: 130.0.2849.56
  Safari: 18.0.1
npmPackages:
  @sveltejs/adapter-auto: ^3.0.0 => 3.3.1 
  @sveltejs/kit: ^2.0.0 => 2.7.3 
  @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.0 
  svelte: ^5.0.0 => 5.1.6 
  vite: ^5.0.3 => 5.4.10

Severity

annoyance

Additional Information

I still hope SvelteKit replicates the browser behavior and does this automatically..

Start by reproducing the Firefox-only behavior with src/routes/+page.svelte and src/routes/a/+page.svelte, following the back-and-forward steps in the issue. Trace the client-side navigation and hash handling involved in that reproduction. Done means browser forward navigates to /a#hash and the element with id="hash" receives its :target styling.