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.

hey Gabor,

How did you get the scroll animations to work on desktop? I’ve implemented css scroll-snapping but that has broken the while-scrolling interactions. Appreciate any pointers :slight_smile: