iOS 10: Page scrolling not disabled anymore

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.

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

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

@supercranky

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

@supercranky

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

@smathson

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

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?!

@saschanos

@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.

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.

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.

#973: * touchmove

Try master.

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.

Also some issues with IOS 11 scroll.

@supercranky

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

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

@MChartier

~~@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.

@MChartier

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

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?

@etiennetalbot

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.

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.

Navigation Menu

Repository navigation

iOS 10: Page scrolling not disabled anymore #973

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

iOS 10: Page scrolling not disabled anymore #973

Description

Activity

saschanos commented on Oct 10, 2016

supercranky commented on Oct 11, 2016

saschanos commented on Oct 12, 2016

smathson commented on Oct 13, 2016

supercranky commented on Oct 14, 2016

saschanos commented on Oct 14, 2016

smathson commented on Oct 14, 2016

saschanos commented on Oct 15, 2016

smathson commented on Oct 15, 2016

RubaXa commented on Feb 19, 2017

matthornsby commented on Nov 5, 2017

kaido24 commented on Dec 11, 2017

MChartier commented on Apr 24, 2018

rainboxx commented on Apr 25, 2018

jimpant commented on Jun 23, 2018

etiennetalbot commented on Jul 20, 2018

Exocomp commented on Jan 26, 2021

Antti commented on Feb 18, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions