Beware: Mobile Safari’s phone detection changes the DOM and can mess your CSS styles

Leo Soto
Leo Soto
Nov 17, 2011 · 1 min read

Posted by Leo Soto on November 17th, 2011.

This is just a quick tip which hopefully can make someone save a few hours of pain: If you have a webpage which works perfectly on every decent browser on the earth (that excludes IE6, of course) but, which has some CSS issue on the iPhone and iPad, and only on the devices running iOS5, the likely reason behind the issue is that Mobile Safari is changing your DOM

Long story short: Remember that nifty iOS feature in which you simple tap a phone number inside a web page and your iPhone immediately calls such number? Well, Safari does that by modifying your DOM. In my particular case, it messed a float style in a web page I’m maintaining.

Ironically, by messing with that little float, the phone numbers presented in our webpage became totally messed up, so you couldn’t tap nor read them. There you have another evidence that we are still a long way from having real artificial intelligence ;)

Anyway, if you don’t want Safari to mess with your DOM, simply put the following meta tag in your HTML:

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

And well, if you still want your users to tap on phone numbers, simply do the markup explicitly in your code, like this:

<a href="tel:1-404-123-45-67">123-45-67</a>

Originally published at techblog.leosoto.com on November 17, 2011.

Leo’s Tech Blog

A personal blog on tech stuff.

Leo’s Tech Blog

A personal blog on tech stuff. Includes older entries that used to live on techblog.leosoto.com

Leo Soto

Written by

Leo Soto

CEO at ContinuumHQ.com, MITI.cl founder. Passionate software developer & MBA

Leo’s Tech Blog

A personal blog on tech stuff. Includes older entries that used to live on techblog.leosoto.com