I’m having a super weird/annoying issue, which I can see from looking through the forum others have also had, but I can’t figure out how to fix it.
In our CMS project pages, the images on mobile (iOS) aren’t always showing. For example, on xforwhy - Zoe Curtis Modern Crochet there are 2 square images next to each other. They show without any issue on desktop, tablet & iPhone landscape, but as soon as you look on iPhone portrait, the left-hand square image isn’t showing. The landscape image under the 2 squares is also not showing in iOS, and neither is the final landscape image.
The weirdest thing about this issue is that it’s not repeatable over all the CMS pages. On some of the project pages, the square images are all showing, on some, none of them are. And then in some cases, they may show, and then after a refresh (but no changes in the design view), they suddenly disappear. So it’s super hard to recreate the issue to get to the bottom of it.
Things I have tried:
Setting Width & Height of all images & containers to 100%
Setting max Width & Height of all images & containers to 100%
Trying VW & VH instead of %
Setting % size just on images
Setting % size just on containers
Changing loading to eager instead of scroll
Changing the Grids to flexbox vertical
I am at a total loss of how to fix this - please help!
I’ve actually got to the bottom of it now, so will write up the fix for others:
It seems that webp images on CMS pages were causing the strangeness. We’ve used webp images throughout the site to try to reduce the size. On non-CMS pages, they work fine in iOS, but within CMS collection lists and on CMS template pages, the webp images were randomly disappearing. We’ve now replaced the webp images with jpgs and the CMS pages are all working as expected.
Hope this helps others - it’s been driving me mad!
I agree that WF doesn’t handle .webp and fallback to .jpg correctly. In this case .jpg image optimisation to reduce its size is best practice and/or together with custom fallback for .webp.
If you are using the Safari search engine at that time and you do not see these images, then Safari probably has not been updated to the latest version. I also had the problem that I couldn’t see any image on IOS but after updating I could see everything
I am having this problem too. In fact you can test this out directly with my live website https://sportstopia.io. For some reasons the images do not load on iphone and i have also set them to eager loading, width 100% height 100% and they are jpg images. They load find on the all other devices but on my phone some don’t load, (CMS items only) however if I refresh the page they then do load. It’s as if the browser loads most images but then if there are too many to load it just stops loading some. You check it out for yourself on sportstopia.io
