iOS scroll issue

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:

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.

IMG_5248_MOV_AdobeExpress (1)

Has anybody seen this behaviour before? Any advice is very much appreciated.