Prevent auto detection of phone numbers in Chrome mobile

Question

I faced an issue with webpage on Chrome mobile: the block with text content being detected as phone number.

I was able to fix issue on Safari by adding meta tag.

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

However debug output for Chrome mobile shows that text being wrapped with chrome_annotation tag.

how does block look like on desktop:

<h1 class="referral-code-text" id="referral_code">
    6132905676
</h1>

how does block look like on Chrome mobile:

<h1 class="referral-code-text" id="referral_code">
    <chrome_annotation data-index="0" data-data="4d5cea19-6226-4052-a243-c68d8d27b47a" data-annotation="6132905676" data-type="PHONE_NUMBER" role="link" style="border-bottom-width: 1px; border-bottom-style: solid; background-color: transparent; border-bottom-color: rgb(0, 0, 0);">
    6132905676
    </chrome_annotation>
</h1>

• Is there any way to prevent phone number detection on Chrome mobile?
• Is there any way to prevent chrome_annotation tag being added on the go?

Answer 1

I'm not sure if this is related to your issue but there is currently an issue in the latest chrome for iOS (v127.0.6533.77) where chrome_annotation tags are added to svgs. This breaks the svgs.

That error is mentioned here:

You can disable chrome from adding these tags by adding the following meta tag to your html.

<meta name="chrome" content="nointentdetection" />