Foundation-emails: iOS Blue links for dates and times

[zurbrandon]

How can we reproduce this bug?
Dates and times on iOS become hidious blue regardless of the base link color. Let's fix that :)

This article has a great snippet in it that prevents that, can we do this or something similar by default in F4E?

http://blog.emailwizardry.co/2016/04/the-absolute-easiest-way-to-beat-blue-links-in-emails-on-ios/

[davidhouweling]

Encountered the same issue. Unfortunately I don't think this is an issue with foundation-emails but rather that a helper should be provided.

I created this helper...

// iOS hack to ensure its 'smart' linking doesn't mess our styles
@media only screen {
  .unlink {
    a {
      color: inherit;
      text-decoration: inherit;
    }
  }
}

Then on the container element of the text that is causing the problem, simply add a class unlink and it will take care of the rest.

For example... <span class="time">09:00</span> will become <span class="time unlink">09:00</span>. The great advantage of this approach is that if you've got large blocks of text that you don't want styled, it works on that as well. This is needed for things such as addresses, 'Today', dates, times, websites without links (your brand might be SomeBrand.com but don't want to link it for some reason).

[rafibomb]

@davidhouweling Do you think the link @zurbrandon added above would do the trick as well? Looking for a universal reset that we can add to the framework.

[davidhouweling]

I just had a scenario where my designer wanted me to leave in the iPhone smart linking for 1 specific scenario. So really we would need to have a way to stop it from doing it as well? However, the way it is outlined in the link (instead of my approach), there is not a way for you to pick and choose.

[sco-tt]

Another thing worth considering is that Gmail also adds links to dates and addresses and I don't think those would be addressed with the CSS in the link that @zurbrandon included.

[sl-digital]

Have you tried using meta tags to disable these:

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

[diomededavid]

Here is a fix:
add the following to a custom sass file:

`/* uncss:ignore */

@media screen {
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
}
/* this rule will be ignored */`

Thanks to http://removebluelinks.com