Leo's Technical Blog

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

Introduction

user

Leo Soto


tips, safari

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

Posted by Leo Soto on .
Featured

tips, safari

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

Posted by Leo Soto on .

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>