I’ve been working on a site and I’ve run into a strange problem where images are not displaying on mobile browsers.
The original styles were nothing special: I had the images wrapped in a div container and they were set to display as inline-blocks. The images were links to an outside page. Nothing special so far.
Everything showed up fine on the desktop browsers but in Mobile Safari and the Android browser some, not all, of the images would simply disappear. The images weren’t missing as there was no ? icon but they simply would not display.
I played around with the styles and found out that if I removed the styles affecting these images altogether, nothing would display at all. If I added a border and padding to the wrapping anchor tag, more of the images would disappear. If I forcibly set a width and a height of 400px on all of the anchor tags then everything would show up. If I set a width and height of 300px everything disappeared.
I’m completely stumped and I have not been able to find anyone with a similar problem.
A few other details: the site is built on WordPress and as you can see from the link, it is running through GoDaddy’s PreviewDNS server. In any case, this looks to be a stylesheet issue but I just don’t know what could be causing the issue.
I forgot to mention the pages initially: the best example is the product page although it happens on others as well.
Well, I found the problem. Something (I love WordPress) was throwing in a max-width: 100000%; on all of the images. If I removed that I seem to have no problems. I wish I could explain why it was only affecting some images or why it was there in the first place but that’s a mystery I’m not prepared to delve into…
I hope someone finds this helpful.