Phonegap application text appears and then immediately disappears. How do I debug this?

Question

Sorry if this isn't a very technical question, but I have no idea how to solve it or even begin approaching to solve it. I can't really give you any code because I don't know what modifies what since this is a MASSIVE code base.

Basically what happens is, theres a box with text in it on a page. When I navigate to this page on my iPhone, the text draws for a split second, then disappears.

It all works fine on Android and in every desktop browser (Firefox, Opera, Chrome, Safari), yet it only disappears on iPhone.

I'm using Safari while my phone is connected to debug via the inspector in real time. When I change any CSS of anything associated to the element that disappears, the text then reappears.

Can anyone offer any insight as to how to debug this issue?

Here's a video of the bug in action, I don't know how else to show this: http://instagram.com/p/iH-znlk2Cc/

Answer 1

Not really answer on how to debug, but a fix.

Looks like iOS has a "feature" to highlight all the phone numbers (actually all the numbers).

So all you have to do is disable format detection for telephone numbers. You do this with pasting this code:

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

in to header of the html file.