Images not showing on IOS but fine in Chrome & Fireox

Question

Hoping someone can help me. I've built a website - http://luluplumbing.co.uk/ hosted on Amazon S3 and all images load fine in Chrome, Edge & Firefox but on IOS and Safari. The main image when the site loads is blank. All other images on the site are fine.

Another example on http://frankinstyyn.co.uk, image 2 on the geography round.

If it helps, I've added the CSS code of the file structure where other images are held...

 url('../images/main.jpg');

Thanks in advance

illustrate please, which image do you mean on luluplumber? why should we guess? — Ilya Muradymov, Jul 24 '20 at 17:55
Not sure how else to show you, it’s the first image on the page that is a black background, it should be a bathroom — Frankinstyyn, Jul 24 '20 at 21:09
what's the size of image & your mobile phone connection type & speed ? — Ilya Muradymov, Jul 25 '20 at 06:17
I’m not sure how that’s relevant, image size varies and it happens on every iOS device, I have an iPhone 11 Pro with 250mbps speed. Like I say, it works on android fine. — Frankinstyyn, Jul 26 '20 at 07:25
"image size varies" – you mean you have some script to handle correct images for different devices? or resize by request? — Ilya Muradymov, Jul 26 '20 at 09:33
Images are responsive and work on all android devices and Chrome, Firefox & edge but not at all on iOS and Safari devices — Frankinstyyn, Jul 27 '20 at 13:27

score 1 · Accepted Answer · answered Aug 11 '20 at 21:11

1

For anyone who stumbles across this, it's most likely that your image is showing, just super zoomed in and broken due to fixed images not working on IOS - see here for more information.

answered Aug 11 '20 at 21:11

Frankinstyyn

183
1
14

Images not showing on IOS but fine in Chrome & Fireox

1 Answers1