Recently, a client who switched from an Android phone to an iPhone reached out to me with a complaint. She mentioned that the links on her website, which I built for her, appear as large empty boxes.
You can view her website here.
To illustrate the issue, she shared some screenshots: https://i.sstatic.net/afUiL.jpg https://i.sstatic.net/mqtjQ.png https://i.sstatic.net/kSLA1.png
After checking with friends who also use iPhones, it became clear that they were experiencing the same problem: seeing big empty boxes instead of clickable links.
Personally, I haven't tested websites on iPhones before because I never received complaints from iPhone users in the past. However, this incident has prompted me to reconsider my testing strategy.
Despite researching online and on Stack Overflow, I couldn't find a specific solution to this link rendering issue on iPhones. It's surprising that such a common problem doesn't have widely known fixes, or maybe my searching skills are lacking.
If anyone has insights on why these links are displaying as huge empty boxes on iPhones and how to resolve the issue to render them correctly across all current iPhone models, I would greatly appreciate your input. Feel free to review my code in different browsers to assist, although I believe it's not overly complex.