Featured image doesn’t show on certain iOS devices
I got several messages from users on iPads and iPhones telling me about this problem. I tried a few different iPads/phones at my school and noticed the same:
The featured image on a question doesn’t show, until you change page oriëntation by tilting the device (iPad). However, this doesn’t always work. This makes me suspect the issue is related to responsive design? On iPhones no featured image is shown at all.
I tried different browsers (safari, firefox, chrome) and they react the same. I suspected this has something to do with the iOS-version the device is running, but I have found older as well as more recent versions that show the featured image correctly. (I don’t have the resources to compare on which versions the problem occurs)
Please advise.
Hi Lars,
HD Quiz simply prints the image directly on the page, the exact same as as any other image.
Instinct/experience tells me that the most likely culprits of this issue are either Image Lazy Loading, or Cache.
Image Lazy Loading is when sites only load images once they are “in view”. If your site has a broken implementation of this, then when a question loads, your site fails to load in the image.
The second possible issue is page caching. iOS devices are infamous for being very aggressive with storing local caches. The problem is that if the cache contains a glitch (such as lazy loading not working), then that glitch becomes cached as well.
What I Recommend
I see you are using W3 Total Cache. First step is to clear your site cache so that W3 Total Cache can rebuild your pages – hopefully error free this time.
Once that’s done, load it up on one of the devices that had the issue and clear the page cache on that device. This is to ensure the device loads the most recent version of the site.
If it works, great!
If it still doesn’t work, then you will need to remove the Lazy Loading implementation on your site. I don’t know if you are using a separate plugin for this, if it was built into your theme, or if you are using W3T’s, but if using W3T, you can disable Lazy Loading from Performance -> General settings.
Extra note: iOS may have different browsers, such as Safari, firefox, chrome, etc – but the secret is that they are actually ALL just reskinned versions of Safari. Apple only allows their own browser rendering engine, so if there is an issue with one browser, the rest will likely all have it too. The problem for me is that Safari is by FAR the worst rendering engine haha.
Thank you for your fast response. I’ll follow your suggestions!
If you are enjoying HD Quiz please leave a review here on the official WordPress.org page. HD Quiz is developed by me, just some dude, and is supported and available for free. It may seem dumb, but truly nothing makes me happier than knowing that people are using and loving HD Quiz and my hard work.
This thread has either been marked as complete or has been automatically closed due to inactivity.