Sveltekit page change adds HTML at bottom of page

Question

I have a Sveltekit Web Application that you can find here

You can also find the full code here

My problem is the following: When I change the page, the new page gets appended to the end of the current page. When I refresh, the old page goes away.

The problem is very similar to this one, but I do not use any loading indicator, and the proposed fixes did not work in my case.

Would anyone know what I am doing wrong?

Package versions:

"@sveltejs/kit": "^1.22.1",
"svelte": "^3.58.0",
"@auth/sveltekit": "^0.3.3",

/+layout.svelte

<script lang="ts">
 ... imports
</script> 

<div class="flex flex-col h-screen">
  <Drawer>
    <AvatarDropdown slot="user" />
    <div class="grow h-full" slot="content">
      <slot />
    </div>
  </Drawer>
</div>

/dashboard/+layout.svelte

<script>
  const user = $page.data.session?.user;
</script>

{#if user}
  <slot />
{:else}
  Please log in
{/if}

/dashboard/+page.svelte

<script>
  import { onDestroy } from "svelte";
</script>
<div
  class=""
  out:fade={{ duration: 0 }}
>
Content
</div>

Olav

Answer 1

As described in this old issue, transitions can mess up your UI.

Adding |local to your transition will solve the problem, like this:

<div out:fly|local={{ y: -200, duration: 500 }}>
    ...
</div>

Another "fix" can be to set data-sveltekit-reload in your link as described here, but obviously you may not want to reload the page when a user clicks on the link.

Olav

You saved my life! how come this question didn't get more upvotes Just for information, from svelte 4 onward local is the default directive for transitions, so I guess this issue must have been pretty common indeed – Phlogistic