Animation behaving differently on desktop & iPhone

Hi all you cool people.

I’m really hoping someone can help me here, because no Webflow University or Forum page has pointed me in the right direction yet.

My project has an animation with some images being introduced for Mobile.
When I view it in the Designer from Mobile Landscape and down and preview it in Webflow or view the published page in responsive mode on Chrome or Safari it looks great!

When I test it on my iPhone, it behaves differently and it’s driving me nuts!

Please check here for public share link
And here is the link for the published site

In the Mobile Landscape and Mobile Portrait modes in Webflow and on desktop, when the animation is initiated, the first image (a room with sunlight coming in) is being cropped. This is the intention.
On iPhone (Safari & Chrome) the first animation scales the image down instead, and it looks really dumb! First of all because I don’t want it to scale, I want it to crop, second because it does a little wobble right when the next image comes in.

I do not understand how the two can be different? This has to be a weird little setting I’m not aware of, right?

I’m really hoping someone has a tip for me.
Thank you so much in advance.

Best,
J.