iOS Automatically Wraps Phone Number in Anchor Tags

January 11, 2013

Tweet

The title says most of it but allow me to elaborate.

After launching http://steamcoils.com, a final cross browser/device check revealed that a phone number on the page was disappearing on iOS devices. The code around the number is as follows:

The “disappearing” number was caused by iOS wrapping an anchor tag around the number to allow the number to be clickable.Our styles for anchor tags caused the number to blend:

Our styles for anchor tags caused the number to blend in with the background.

After changing the anchor tag’s styling to have white font (which it should have had all along), the number “reappeared”.

Lesson here, be aware of this little iOS thing and be aware of the styling of your a tags.

Bugs etc., iOS, Web Design and Development, Web Tutorials