Images on certain page not showing on an iPhone (Safari)

I have an issue with certain images not showing in Safari on iphone. (Issue on Team page - link below)

I’ve tried testing this for mobile versions in the browser using the developer tools, but the issue seems to be when I’m actually viewing it on my phone in Safari.

I’m viewing this in Safari 16.1 on iOS 16.1. There’s also the same issue in Safari 17.

I read somewhere to try and give the image a fixed height and width in pixels but that didn’t seem to work. Also cleared all browser data and cookies but the issue still seems to be there.

The scrolling animation is done with some custom code -

@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 1rem)); } } .scroll { animation: scroll 30s linear infinite; } .scroll-logos { animation: scroll 160s linear infinite; }

Thank you for any help it’s much appreciated.

Here is my site Read-Only: FounderX – Meet Our Dynamic Startup Advisory Team

1 Like

Hey @Ben_Skinner it seems that the attribute loading=“lazy” on the img-tags inside the Marquee is causing the issue. I think that the browser does not recognize when the image is in the viewport due to the animation. Try to change the setting of these images in the Webflow Designer to: Eager: loads with page

Screenshot 2023-10-16 at 15.11.49

1 Like

Thanks for that Mirko, I didn’t think of looking at the loading attributes - I’ll give that a try! Thank you and much appreciated!

1 Like

I have tested it in the DOM. I deleted the attribute and then the image loaded successfully, so I think this will work. Please let me know :slight_smile:

I had the same problem only on iphone on chrome and this solved the issue.

1 Like