Recently I had an issue where the telephone number simply did not appear on a website we had developed. The “Call us” text appeared fine, but the number itself didn’t.
This strange phenomenon was occurring on the strange world of iOS. Windows and Android seemed to resistant to this issue. Even Mac’s desktop version seemed fine. Just iPhones and iPads.
Now the text itself was nothing strange. Just a simple <p> tag with a <span> to add some styling, which included some padding, a background and font size and colour. The rest of the styling appeared, even for the telephone number. The box appeared with padding and appeared the correct size. But the essential part, the text, remained elusive.
Turns out that as part of the iOS operating system, it turns telephone numbers into links so that you can click on them and call them. Because the main part of the style sheet turned links the same colour as my background, it was causing the text to change colour.
So if you are having issues with text not appearing on iOS devices, you need to add styling to your <a> tags and make sure they override any inherited styling you have.