Search code examples
htmliosiphoneemailhtml-email

Removing date/time styling from HTML email iPhone

I've created a responsive HTML email which works fine across many different platforms except when viewed on iPhone.

It seems that iOS is recognising a date + time and applying a blue colour/underline to the content. I've researched this issue for the past couple hours and am at a dead end.

I've tried turning format detection off for phone numbers:

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

I've tried including date and address in this too:

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

I've tried adding !important to the styles on the element with still no luck:

<h4 style="font-size: 16px;color: #FFFFFF !important; text-decoration:none !important;font-family: Arial;font-weight: bold;padding: 0;margin: 0;text-align: left;line-height: 1.3;word-break: normal;" class="appleLinksWhite">
    Thursday 20th November
</h4>

<p style="color: #FFFFFF !important; text-decoration:none !important;margin: 0;margin-bottom: 0;font-family: Arial;font-weight: normal;padding: 0;text-align: left;line-height: 19px;font-size: 14px !important;" class="appleLinksWhite">
    10:45am until 12:30pm,<br>The Feast, Suffolk Food Hall, Ipswich
</p>

I've tried adding a class to the elements .appleLinksWhite as recommended here which still did not do the trick.

I have also tried wrapping the inner contents in a <span> with the colour and text-decoration set and this still didn't work.

I'm at a loss for other things to try. How can I disable this behaviour?

Edit* It's worth noting that the issue is only with iPhone 4/5. iPhone 6/Plus are fine.

Solution

  • I managed to get this working by tricking the date detection algorithm into thinking it's not dealing with a date by inserting a zero width &#8203; character in between my date/time strings e.g:

    <h4 style="font-size: 16px;color: #FFFFFF !important; text-decoration:none !important;font-family: Arial;font-weight: bold;padding: 0;margin: 0;text-align: left;line-height: 1.3;word-break: normal;" class="appleLinksWhite">
    Thursday&#8203; 20th&#8203; November&#8203;
</h4>

<p style="color: #FFFFFF !important; text-decoration:none !important;margin: 0;margin-bottom: 0;font-family: Arial;font-weight: normal;padding: 0;text-align: left;line-height: 19px;font-size: 14px !important;" class="appleLinksWhite">
    10:45am&#8203; until&#8203; 12:30pm&#8203;,<br>The Feast, Suffolk Food Hall, Ipswich
</p>