CMS images not showing in iOS

Design help CMS
1

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!

2

You can wrap your images in div element and set img to take 100% of its wrapper. It is good practice anyway.

3

Thanks @Stan, but I’d already tried that too.

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!

4

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.

5

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