Hey Webflow fam,
I have a weird iOS-related issue in my project.
My objectives are:
- I want to use css scroll snap
- I need three sections
- I need to animate an object while I’m scrolling, i.e. switching between the three sections
I made it working on desktop however it doesn’t work on any of my iOS devices (iPad Pro 10.5-inch running iOS 15.2, iPhone 11 Pro iOS 15.5) not matter what kind of browser I’m using.
Please find the read-only example here.
And the live website: https://example-08de86.webflow.io
The structure is quite simple:
- Body
–| content
–| .scroller-wrapper
----| .scroller-section
----| .scroller-section
----| .scroller-section
I have a “while scroll in view” animation on the second .scoller-section that moves the content in the x-direction.
Here’s what I found so far:
- I’m pretty sure that this is an iOS specific problem
- something is wrong either in my project with the overflow of the divs or there is a bug in iOS devices
- in the read only project my Body’s overflow is set to hidden and the .scroller-section’s overflow is set to scroll. I want to use these overflow settings because of css scroll snap.
- when I test the interaction on desktop it works perfectly, however on my iOS devices the animation doesn’t get triggered - see gif below.
Has anybody seen this behaviour before? Any advice is very much appreciated.
