iOS 10: Page scrolling not disabled anymore

[saschanos]

When trying to sort items, on Apple iOS 10 the page is scrolling - even on your example page. Is there any solution for this problem? Regards from Germany.

[saschanos]

maybe also have a look here:
http://www.openradar.me/28359335

[supercranky]

I had the same problem, it seems like it's working if you add

document.ontouchmove = function(e){
    return true;
};

Maybe it just needs a default ontouchmove handler

[saschanos]

Hey @supercranky, looks better but not perfect - page sometimes scrolls in landscape mode. Found some other links regarding this issue:

• https://openradar.appspot.com/28479522
• iOS10: can't drag anything without scrolling bevacqua/dragula#426

[smathson]

@supercranky Any idea why this works? Trying to figure out if there are any side effects from adding a global ontouchmove handler.

[supercranky]

@smathson No idea really. Something must have changed in the inner workings of the browser :)

[saschanos]

jQuery UI and his drag functions do work under iOS 10 (also in older versions). Maybe we can have a look where's the difference between the code of this module and jQuery UI?!

[smathson]

@saschanos Which jQuery UI drag functions work in iOS 10? Doesn't look like any code deals with touch and the demo site doesn't work in iOS as far as I can tell.

[saschanos]

Have a look at that website: https://www.date-your-career.de/fragebogen. Click the first option multiple times until you reach the question where you can see draggable elements. These elements are working perfectly on iOS 10 and it was realized by jQuery UI and jQuery UI Touch Punch.

[smathson]

Got it, so it's the Touch Punch plugin that's handling the touches. Looks like it works by handling the touch events and converting them to the corresponding mouse events.

[RubaXa]

Try master.

[matthornsby]

I'm having a similar issue on master in ios11 in my local project but can't replicate on any of your demos. I suspect there must be some setting i'm missing.

[kaido24]

Also some issues with IOS 11 scroll.

[MChartier]

The example @supercranky provided didn't work for me with iOS 11.3, but this did:

window.addEventListener('touchmove', (e) => {
return;
}, { passive: false });

[rainboxx]

@MChartier Where did you add this? Trying to verify whether this could work for us as well.

---

Edit: sorry, turned out that we had an older version fixed with the package-lock.json as a dependency of the legacy AngularJS package. Updating fixed the issue for iOS 11: master is checking for passive mode etc. which seems to be the root cause for this issue.

[jimpant]

@MChartier Thank you! You comment also helped my situation in an e-shop with various carousels!

[etiennetalbot]

Hi everyone... I noticed a performance problem while scrolling my app on older android devices. When sortable.js is included, scrolling becomes janky app-wide. I found that the problem was this bit of code here:

_on(document, 'touchmove', function (evt) {
	if (Sortable.active) {
		evt.preventDefault();
	}
});

I get why it's there (iOS problem and all) but, I mean, wouldn't it be better if the event listener was only created on touchstart of a sortable item, and then deleted on touchend of that sortable item?
Or maybe just do it the other way around... since clearly we only need this when Sortable.active is defined, why not set the listener when it becomes defined and clear it when it's nulled?

Otherwise when checking with the Chrome devtools' Rendering > Scrolling performance issue tab, we get this all the time:

And it does affect scrolling performance...
What do you think?

[Exocomp]

I noticed the global touchmove while doing performance profiling, I see the same thing that @etiennetalbot mentioned.

This seems like a hack to just globally listen on touchmove.

// Fixed #973:
if (documentExists) {
	on(document, 'touchmove', function(evt) {
		if ((Sortable.active || awaitingDragStarted) && evt.cancelable) {
			evt.preventDefault();
		}
	});
}

I only use sortablejs on one component (Angular) but on every component now I see sortable touchmove in the profiler timeline. So it is running for no reason for the components which are not using sortablejs. It should only be enabled when necessary where sortablejs is used that would be ideal.

[Antti]

Any updates on this?
The only workaround (without forking this lib) is to require sortable only when needed, and not just import lib as normal.