View transitions are broken with `experimental: "async"` enabled

[firatciftci]

Describe the bug

When the compilerOptions.experimental.async option is set to true in the svelte.config.js file, there appears to be a regression with view transitions, where the default behavior of a fade transition between page navigations does not occur. Instead, when clicked on an anchor tag to navigate, the previous page hangs for a few seconds — with nothing on the page interactive — and the next page appears suddenly, with no transition.

This behavior occurs both for brand new and existing SvelteKit applications. Removing the experimental flag solves the problem, but I would like to upgrade a few of my existing applications to use the new async syntax, and this bug is blocking any upgrade, as they all use view transitions.

As per the official blog post on this, here is the only modification I have made on a brand new SvelteKit application to get page-based view transitions to work:

<script lang="ts">
  // src/routes/+layout.svelte
  import { onNavigate } from '$app/navigation';

  onNavigate(async (navigation) => {
    if (!document.startViewTransition) return;

    return new Promise((resolve) => {
      document.startViewTransition(async () => {
        resolve();
        await navigation.complete;
      });
    });
  });
</script>

As an aside, perhaps it could be useful to move this (very valuable) information about view transitions from a (now) old blog post into a more prominent section of the main SvelteKit documentation.

Reproduction

Below is a reproduction with the async experimental feature enabled and the view transitions code snippet mentioned above added. You can remove the async experimental flag to compare with the expected behavior:

https://stackblitz.com/edit/sveltejs-kit-template-default-mkrwzn3q

Logs

System Info

System:
    OS: macOS 15.5
    CPU: (14) arm64 Apple M4 Pro
    Memory: 436.98 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.18.0 - ~/.local/state/fnm_multishells/95936_1755189747768/bin/node
    Yarn: 1.22.22 - ~/.local/state/fnm_multishells/95936_1755189747768/bin/yarn
    npm: 10.9.3 - ~/.local/state/fnm_multishells/95936_1755189747768/bin/npm
    pnpm: 10.9.0 - ~/Library/pnpm/pnpm
    bun: 1.2.20 - ~/.bun/bin/bun
  Browsers:
    Chrome: 139.0.7258.127
    Safari: 18.5
    Safari Technology Preview: 26.0
  npmPackages:
    @sveltejs/adapter-auto: ^6.0.0 => 6.1.0 
    @sveltejs/kit: ^2.22.0 => 2.30.0 
    @sveltejs/vite-plugin-svelte: ^6.0.0 => 6.1.2 
    svelte: ^5.0.0 => 5.38.1 
    vite: ^7.0.4 => 7.1.2

Severity

blocking an upgrade

Additional Information

No response

[gornostay25]

Any updates?
@firatciftci Do you find a solution for this issue?

[eddiemcconkie]

In case it helps with debugging, here's another demo that uses await tick() instead of SvelteKit's navigation. If you change the REPL to an older version of Svelte it works correctly

[luppiale]

Tracked also in sveltejs/svelte#16429

[kroniapp]

Just wondering if there’s any timeline for a fix. I’m working on an update for my project, and this is the last missing piece before I can deploy.

[kyoshino]

I’ve also noticed the issue and removed the transition for now.

[dummdidumm]

I debugged this a bit and it seems that requestAnimationFrame, which tick uses in async Svelte, is extremely delayed during a view transition. If I replace it with a setTimeout it's fast again. Not sure what to make of that yet.

[kyoshino]

View transitions are now working with svelte@5.39.6. Thanks for the fix! 💯