SvelteKit Hydration Mismatch Safari Mobile Browser (work around included)

[JoshuaHintze]

Describe the bug

All,

I've been pounding my head for the last 10 hours on why my SSR hydration fails but only on the iphone/ipad and no where else!

TLDR; Apple has this cool new feature that will automatically detect numbers that they THINK are phone numbers into an <a href="tel:XYZ>{number}. This will fail hydration and give a mismatch.

Proof: Normal browser output

Safari Iphone Output

Reproduction

To reproduct this just make a new sveltekit applicaiton and return a really long number, must be over 7 digits

+page.ts

export const load = async () => {
	return { number: '15555555555' };
	// return { number: 'pass15555555555' }; // this works because it wont be treated as a phone number
};

+page.svelte

<script lang="ts">
	let { data } = $props();
</script>

<svelte:boundary onerror={(error) => console.log('error', JSON.stringify(error))}>
	<p>The number is {data.number}</p>

	{#snippet failed(error)}
		<p>Error: {JSON.stringify(error)}</p>
	{/snippet}
</svelte:boundary>

What happens is that the server will first render as part of SSR and send down a nice <p> tag and then safari will take that, add the <a> tag around what it thinks is a telephone number and then sveltekit will throw a hydration mismatch, effectively bringing your app to an error screen.

A workaround for now is to add this meta tag

<meta name="format-detection" content="telephone=no">

https://blog.identitydesign.us/safari-phone-number-blue-fix/

You can witness the issue because for a brief second you can see the server rendered DOM with a blue underline before it crashes.

It would be great if sveltekit could work around this somehow. I'm not sure but you are all smart. At the very least maybe add the meta take into the sveltekit start template?

Logs

System Info

System:
    OS: Linux 6.6 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700K
    Memory: 16.14 GB / 31.22 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 22.21.1 - /home/joshh/.nvm/versions/node/v22.21.1/bin/node
    npm: 10.9.4 - /home/joshh/.nvm/versions/node/v22.21.1/bin/npm
    pnpm: 10.23.0 - /home/joshh/.local/share/pnpm/pnpm
    bun: 1.0.15 - /home/joshh/.bun/bin/bun
  npmPackages:
    svelte: ^5.45.6 => 5.45.10

Severity

blocking all usage of svelte

[Conduitry]

This has come up before, and this (or something very similar to this) was supposed to have been fixed in #15819 / #15851. It'd be interesting to know what's changed since then, or what's different about this issue.