Apple Mobile Web App CSS Issue

Question

I currently have a website that I am trying to use as a web app.

I've added the approiate meta tag, <meta name="apple-mobile-web-app-capable" content="yes"> which works as advertised.

The only issue is that when you launch the website as a web app, some of the CSS in a jQuery timer I have doesn't display correctly. The numbers load with no color, and once they start rotating, that's when the correct color shows up. You can see this from the screenshot.

Any ideas on why this is happening? This only happens when you launch it as a web app.

Here is a demo, http://jako.in/countdown/

Answer 1

So I ended up finding the solution to this. Turning on apple-mobile-web-app-capable was causing Safari to treat that timer as a phone number. Which is why it was turning it another color. Adding <meta name="format-detection" content="telephone=no" /> fixed my issue.