Hero composite image not loading correctly on iOS devices

Hi everyone. I’ve done a lot of the tutorials but this is my first time making a site on my own with Webflow.

My hero image is a composite of two images laid on top of one another, in order to achieve a parallax effect. The problem is that when I view the published site on either my iPhone or iPad, one of the two images doesn’t appear initially. It only appears once I start scrolling down the page.

It works fine in the designer’s preview mode and on my Windows laptop (tested Chrome, Firefox, Edge, and IE), and also works fine on an older Blackberry phone using Chrome.

Does anyone know what is going on here?


Here is my site Read-Only: https://preview.webflow.com/preview/change-weavers-consulting?utm_medium=preview_link&utm_source=designer&utm_content=change-weavers-consulting&preview=ad99337a29aca279bae7619e650d1242&mode=preview

And published site: https://change-weavers-consulting.webflow.io/

Hi,

Welcome to Webflow. It’s hard to test this, as I obviously can’t publish the site to test it live, but you could try adding the below settings to your interaction:

That didn’t do the trick, but in playing with the offset, and then seeing that disabling the animation got rid of the issue, I then got the idea to play with the Z-index of my hero images. They were both set to -1. It seems to be good now that I’ve changed one of them to 0.

I don’t understand what relation there is between the animation and the Z-index, but it seems good now. Thanks for the help!