Not working with iOS 11.3 Mobile Safari

[tobihagemann]

It looks like the workaround

window.addEventListener( 'touchmove', function() {});

doesn't work anymore with iOS 11.3 Mobile Safari. Is there a new workaround? 😅 It looks like that the same issue applies to Chrome on iOS as well.

[reppners]

Confirmed. Relates to #77

Could only find this:
https://bugs.webkit.org/show_bug.cgi?id=182521

I'll take a look if the detection for passive event listeners works for iOS 11.3 - if it does already apply { passive:false } and it still does not work than this is going to be a fun thing for anybody trying to prevent touchmove do its thing 😞

[reppners]

Turns out the same workaround still applies but because Safari on iOS 11.3 enables passive event listener support it defaults to passive: true for event listeners on document level.

The fix is simple:

window.addEventListener('touchmove', function () { }, {passive: false})

But this puts the burden of feature detection of passive event listeners on the polyfill user. Maybe I should put this into another augmentation module so people who need to support Safari just import and apply a single makeItWorkOnSafari() function..

[tobihagemann]

Thank you for the fast response and I can confirm that it works! 🎉

But this puts the burden of feature detection of passive event listeners on the polyfill user.

I don't actually understand the workaround but is there anything that I have to worry/think about when using this? The "burden" you've mentioned, I don't understand what you mean by that. I guess I would have to read up on passive event listeners and their feature detection. 😅

[reppners]

I don't actually understand the workaround but is there anything that I have to worry/think about when using this? The "burden" you've mentioned, I don't understand what you mean by that. I guess I would have to read up on passive event listeners and their feature detection. 😅

If you need to support older browsers (e.g. previous Safari) the third parameter on document.addEventListener() would be interpreted either as capture parameter or something else unintended happens.

To correctly apply the different workarounds you now have to check for passive event listener support and act accordingly

if(supportsPassive) {
  window.addEventListener('touchmove', function () { }, {passive: false});
}
else {
  window.addEventListener( 'touchmove', function() { });
}

[tobihagemann]

All right, thank you! For anyone stumbling upon this issue and wants to know how to get supportsPassive, you can test if passive event listeners are supported with:

// Test via a getter in the options object to see if the passive property is accessed
var supportsPassive = false;
try {
  var opts = Object.defineProperty({}, 'passive', {
    get: function() {
      supportsPassive = true;
    }
  });
  window.addEventListener("testPassive", null, opts);
  window.removeEventListener("testPassive", null, opts);
} catch (e) {}

Source: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection

[virendrampatil]

Hi guys,
After updating the iPad to iOS 11.3 drag drop is not working as expected. Tried the above workaround mentioned by @tobihagemann it's still not working :(

[reppners]

Please provide exact failure description, code regarding the workaround and polyfill configuration.

[virendrampatil]

I get this error

when I scroll and then try to drag across the screen touch move event is not triggered

[reppners]

I get this error

Is that some type-checker complaining or who does raise the error?

If you're targeting this code to Safari iOS11.3 than it's perfectly valid since its supporting the new addEventListener api.

According to can-i-use it's supported on earlier versions, too. What has changed is that document-level listeners by default apply { passive: true }.

when I scroll and then try to drag across the screen touch move event is not triggered

I'm not sure I can follow

• Do you try to start a drag while the view is still scrolling/moving by inertia? This was never supported afaik.
• Does a drag not even start (no drag image visible)?
• Does drag start but you can't really move the draggable because the view is scrolling when you touchmove?

[virendrampatil]

Yes, this is the issue: drag starts but can't really move the draggable because the view is scrolling when you touchmove.

[reppners]

Thanks for clarifying. I have an iPad at hand that is pending the update to 11.3. Will try to check locally if I can find anything helping your issue.

[reppners]

Updated the iPad 2017 to iOS 11.3 and the demo works without problems. Note that I updated the gh-pages demo containing the new workaround a few minutes ago - please check if http://timruffles.github.io/mobile-drag-drop/demo/ works for you, too.

[sampreethD]

touchEvents are not supported by safari browsers . Please check this https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

[reppners]

Closing as this is "solved" and referenced in the README.