iOS 15 with smartphone/tablet smooth: true has site-breaking display issue

[michaelegan]

Hello 👋

Describe the bug
Viewing a Locomotive Scroll website with smooth: true enabled via smartphone and/or tablet parameters causes inconsistent display of navigation, difficulty scrolling to the very bottom (noticeable white space) and premature stopping of site scroll on the way back up.

Seeing this on a few of my sites where iOS 14 and desktop browsers works as expected but iOS 15 is an unusable scroll experience on Mobile Safari.

Using latest locomotive-scroll version from Git.

To Reproduce
Steps to reproduce the behavior:

1. Go to this website on iOS15 simulator or device
2. Start scorlling
3. See error

Expected behavior
Regular smooth scrolling introducing smooth scrolling between scroll sections, parallax scrolling of images to match desktop

Desktop (please complete the following information):

• N/A

Smartphone (please complete the following information):

• Device: iPhone 11 device / iPhone 13 via Xcode simulator
• OS: iOS15
• Browser: Mobile Safari
• Version: latest

Hoping to get some eyes on this. I love using this plugin as an easy add for parallax items but I'll need to temporarily disable this to restore site function.

[filippodicostanzo]

Same issue only on Safari with iOS 15.

Chrome installed on iOS 15 works fine.

[eduardfossas]

Same problem plus disabling it will cause all the sticky elements to break. Please check.

[kieranmansfield]

I've got the same issues, it's broken the scrolling on my site as soon as elements start moving. Weirdly though, other iOS browsers (they're all based on Safari) - everything works as expected. I think this issue is probably caused by the change to touchmove and the ability to no longer use preventDefault() with it.

[filippodicostanzo]

I just tried it on iPad running iOS 15.00 and it works fine.
The problem remains on iPhone.
Has anyone found a workaround?

[filippodicostanzo]

Any news for this issue?

[michaelegan]

I'm hoping iOS 15.1 will fix the preventDefault() problem but no word back on any workarounds. I'll be turning this off for mobile once I get to it.

Was hoping to leave the link up long enough to get acknowledgement but I can't leave the site unattended forever.

[filippodicostanzo]

Prevent Default is need to fix.

https://pqina.nl/blog/how-to-prevent-scrolling-the-page-on-ios-safari/

This is a work around for fix a open modal with no scroll

I hope to fix this issue with iOS 15.1

[kieranmansfield]

Still broken on iOS 15.1.

[filippodicostanzo]

yes I tried yesterday and the error is still present

[stephen-wright1]

Any news on a fix for this?

It seems like the locomotive scroll demo site is not using locomotive scroll in mobile viewports anyway (refresh their demo site (https://locomotivemtl.github.io/locomotive-scroll/) with a minimum width browser window!). So it seems like the 'official' fix is to not use locomotive in mobile, and let the native smooth scroll of mobile devices take over.

[Dushyant1295]

All I suggest guys scroll hijacking on mobile device is not pleasant experience, I would suggest disable it for mobile view

[nelson-designs]

Any updates on this one? I'm thinking about disabling smooth scroll on safari mobile devices. Just trying to figure out how.

[shmaltz]

Any update on this?
I really wish I can disable smooth scroll on mobile devices, but it messes up the items with horizontal scroll.

[07734]

The following code snippet will resolve the issues in Safari.

html.has-scroll-smooth {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
}

[itskoyii]

The above code snippet disabled the locomotive scroll on mobile which also diable the horizontal scrolling and other data-scroll-speed