Hydratation fails on iOS Safari when a number triggers the browser’s automatic phone detection

[bfontaine]

Describe the bug

Hello, in iOS Safari the hydratation fails if one number is detected as a phone number and auto-linked by the browser if it’s followed by an {#if} (and maybe other cases).

To reproduce see my repo in the other section, but it suffices to write this in a +page.svelte:

0601020304
{#if true}+{/if}

then open it in iOS Safari. The page is briefly shown with a blue link on the number (server-side rendering), then it becomes a blank page (hydratation fail). I guess this is because the JS is not expecting a link there.

For some reason the problem doesn’t happen if there is no space (0601020304{#if true}+{/if} ) or no {#if} (0601020304).

Disabling the browser auto-detection fixes the issue:

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

I’m not sure if this is fixable in Svelte, but at least if someone has this issue hopefully they’ll see this report without losing all the time I spent on it.

Edit: I forgot to write that this used to work in Svelte 4.

Reproduction

https://github.com/bfontaine/sveltekit-ios-phone-bug

Run it with npm run dev -- --host 0.0.0.0 then open http://your_ip:5173/ in iOS Safari.

Logs

System Info

Computer:

  System:
    OS: Linux 6.8 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 4.10 GB / 15.32 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 22.11.0 - ~/.n/bin/node
    Yarn: 1.22.19 - /home/linuxbrew/.linuxbrew/bin/yarn
    npm: 10.9.0 - ~/.n/bin/npm
    pnpm: 10.10.0 - /home/linuxbrew/.linuxbrew/bin/pnpm
  Browsers:
    Chrome: 136.0.7103.59
  npmPackages:
    svelte: ^5.0.0 => 5.28.2


Phone: iOS 18.4.1

Severity

annoyance

[7nik]

duplicate of #15819 which basically about the same problem as #15337