Unique z-index issue (behaving differently on desktop mobile vs. mobile device)

Hi all,

This is a character builder I built for a client.

the-architect.webflow.io/v2-home
password: notforyou

The swipe/scroll interaction works on both desktop and mobile, but for some reason the mobile version always shows the character body as layered on top of all the items. But, the problem is specific to mobile devices, the site behaves correctly when I change the device view to mobile in developer tools. The problem persists on Chrome, Firefox, and Safari (on iPhone)—I haven’t been able to test on an Android device yet.

If you scroll/swipe on the sections, you’ll see the objects layer into the character’s body. For context on how complicated the layering system is, here’s a layering chart w/ z-index values for how the illustrator and I split up the sections to layer properly.

Any ideas on why this doesn’t work on mobile devices?

Thank you!


Here is my site Read-Only