View transitions in Safari with SvelteKit

[mig-hub]

Hello,

I'd like to know if anybody had any luck making view transitions work on Safari with SvelteKit. I am really implementing the basic example which you can find in most tutorials online and it works fine on Chrome but not on Safari. I know for sure my version of Safari (26)can have view transitions because I can test other examples online using view transitions and they work fine. So I suspect it is the way I trigger them inside SvelteKit that is not compatible with Safari.

For the sake of completeness, here is the javascript code I use :

  onNavigate((navigation) => {
    if (!document.startViewTransition) return;
    return new Promise((resolve) => {
      document.startViewTransition(async () => {
        resolve();
        await navigation.complete;
      });
    });
  });

And my CSS:

:root::view-transition-old(root) {
  animation: fadeOut 1s both;
}

:root::view-transition-new(root) {
  animation: fadeIn 1s both;
}

Anybody is having the same issue and/or knows how to make it work?

[vekunz]

I have it in a SvelteKit App and it works fine in Safari. Here is my Code of the root +layout.svelte:

<script lang="ts">
	import '../app.css';
	import '$lib/fonts/fonts.css';
	import {onNavigate} from "$app/navigation";

	let { children } = $props();

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

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

{@render children()}

And here (part) of my app.css:

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: fade-out 250ms ease forwards;
}

::view-transition-new(root) {
    animation: fade-in 250ms ease forwards;
}

@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in  { from { opacity: 0; } }

[mig-hub]

Thank you so much @vekunz , I've realised that I had misspelled my animation names. It is working now. It kind of make the mystery bigger though because I don't know how it was working before on Chrome for me and not others. Maybe the name was so generic that chrome used a default pre-baked one. Or it was cached from another project since it was on localhost. Mystery.

Anyway, thank you so much for taking the time to come back to me. Knowing it was working for somebody else motivated me to look elsewhere.

[MILLERMARRU]

The difference between your snippet and vekunz's working one is the CSS, specifically the missing @view-transition { navigation: auto; } at-rule. Chrome's document.startViewTransition() API works when called from JS regardless of any CSS declaration, that's how the API originally shipped. Safari's implementation of the CSS View Transitions spec ties same-document navigation transitions to that at-rule being present. Without it, WebKit doesn't opt the navigation into the transition even though document.startViewTransition exists and runs.

So add it to your global CSS alongside your existing ::view-transition-old/new rules:

@view-transition {
  navigation: auto;
}

vekunz's example has exactly this and works in Safari; yours doesn't and fails there specifically, that lines up with a spec-conformance gap rather than anything wrong in how you're calling onNavigate/startViewTransition. It's a good one to keep in mind generally: any View Transitions example that only shows the JS trigger and skips the CSS at-rule is implicitly Chrome-only, since Chrome doesn't require it and Safari does.