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.