Hydration issue occurs only IOS by automatically converting numbers to 'a' tag

[gusrb3164]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Bug occurs only IOS(mobile safari, Mobile Safari UI/WKWebView, Instagram, ...)

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/gusrb3164/next-hydration-debug

To Reproduce

1. npm run dev
2. enter the localhost:3000 with Iphone safari

Describe the Bug

Error log: Text content did not match. Server: "test : name name test : " Client: "test : name name test : 111-11-11111"

I entered the numbers in p tag.

<p>
    <br />
    test : name name test : 111-11-11111
</p>

The actual variable root.containerInfo.childNodes was converted into a tag as shown in the picture below.

Expected Behavior

There is no cause for the hydration issue, but it is occurring.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[kleintorres]

This is happening because Safari on iOS automatically parse phone numbers as links on the fly, causing a mismatch between what is rendered on server side and on client.

Adding the format-detection meta tag disabling this feature fixes the issue, but I guess is something up to Next developers to do globally or not.

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

[gusrb3164]

Oh, looks like an option that conflicts with hydration. Thank you for your answer.

[ghost]

For other users who found this article...
I solved it by wrapping it in a span tag

it's sad

[0xliam]

This also occurs on Safari for iPadOS. Using the workaround that the ghost user suggested solved this for me too.