Some Images Not Showing Up On iOS Devices

Hi, guys!

This is literally an iOS bug for years. I read through so many articles but none of them help. I cloned a 3D Carousel Slider and the images I put into the caroucel_cell div do not show up in any browser using iOS Products, neither Safari nor Chrome in iPhone/iPad.

I think it is not the file size problem, they’re 100kb-160kb. Not the overflow thing too, they’re not hidden. I also tried to remove the styles but it did not help.

Can somebody please tell me what to do?

Desktop (Browser: Chrome)


It looks just fine on my laptop

Android Phone (Huawei Nova 2 Lite + Chrome)


Nothing goes wrong

iPhone 13 Pro Max + Safari


The texts are totally messed up without the images

iPhone 13 Pro Max + Chrome


Looks exactly the same as Safari

iPad Air 3


I’m dead

Please help me TT_TT


Here is my site Read-Only: https://preview.webflow.com/preview/eve404?utm_medium=preview_link&utm_source=designer&utm_content=eve404&preview=3673708a4aaaae9d1ca5bfe82002d6c8&workflow=preview

Another link to refer to: https://eve404.webflow.io/

Just changed the image size unit into % and it works.

2 Likes

I fixed this by assigning each image an ID, and then giving these ID width and height, I found that When I inspected in safari, the images were taking 0x0 space so I assigned some fixed values to them