Layout with transition not unmounted on navigation

Describe the bug

When routing from /b to / using an anchor element, the /b/+page.svelte component does not get unmounted.

<!-- /routes/b/+layout.svelte -->

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

  $: isB = $page.url.pathname === '/b';
</script>

<slot />
{#if isB}
  <div transition:slide><a href="/">Home</a></div>
{/if}

<!-- /routes/b/+page.svelte -->

<div><a href="/">Home</a></div>

• Expected behavior: all /routes/b related components should be unmounted.
• Actual behavior: the <div><a href="/">Home</a></div> component remains.

Reproduction

Check Stackblitz

Instructions

1. Press /b
2. Press /a

Expected behavior

/a

/b - /a/+page.svelte

Actual behavior

/a

/a - /b/+page.svelte
/b - /a/+page.svelte

Logs

No response

System Info

System:
  OS: Windows 10 10.0.22621
  CPU: (8) x64 AMD Ryzen 7 4700U with Radeon Graphics
  Memory: 3.79 GB / 15.32 GB

Binaries:
  Node: 18.12.0 - C:\Program Files\nodejs\node.EXE
  npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD

Browsers:
  Edge: Spartan (44.22621.675.0), Chromium (105.0.1343.53)
  Internet Explorer: 11.0.22621.1

Severity

annoyance

Additional Information

• https://github.com/sveltejs/kit/issues/3753#issue-1125425183

[s3812497]

While waiting for a fix, you can workaround this by adding local to the transition:

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

  $: isB = $page.url.pathname === '/b';
</script>

<slot />
{#if isB}
-   <li transition:slide><a href="/a"><code>/a</code></a> - <code>/b/+layout.svelte</code></li>
+  <li transition:slide|local><a href="/a"><code>/a</code></a> - <code>/b/+layout.svelte</code></li>
{/if}

But either way, a very interesting bug. I’ve had similar troubles with navigation and using transitions, but adding local usually fixes them. However, it’s still confusing when it happened to me while I was learning Svelte.

[dummdidumm]

I can’t track this down to a recent kit version, going back as far as 450 still reproduces this. I think the issue lies in Svelte core. I can reproduce this with a simple variable that is updated every 10 miliseconds. My guess is that updating the value while transitioning out breaks things.

<script>
  import { slide } from 'svelte/transition';

  let foo = {t:true}
  setInterval(() => foo={t:true}, 10);
</script>

<slot />
{#if foo.t}
  <li transition:slide><a href="/a"><code>/a</code></a> - <code>/b/+layout.svelte</code></li>
{/if}

https://stackblitz.com/edit/sveltejs-kit-template-default-8n1tyl?file=package.json,src%2Froutes%2F%2Blayout.svelte,src%2Froutes%2Fb%2F%2Blayout.svelte