Not working with iOS 11.3 Mobile Safari #124

tobihagemann · 2018-03-30T12:23:35Z

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 · 2018-03-30T17:19:24Z

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 · 2018-03-30T20:18:54Z

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 · 2018-03-30T20:31:52Z

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 · 2018-03-31T18:25:00Z

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 · 2018-03-31T20:29:43Z

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 · 2018-04-05T05:51:42Z

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 · 2018-04-05T05:55:41Z

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

virendrampatil · 2018-04-05T07:24:57Z

I get this error

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

reppners · 2018-04-05T07:53:05Z

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 · 2018-04-05T08:31:16Z

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

reppners · 2018-04-05T08:39:58Z

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 · 2018-04-05T09:05:37Z

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 · 2021-04-16T09:06:16Z

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

reppners · 2021-12-29T13:48:01Z

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

reppners added the bug label Mar 30, 2018

reppners added the has-workaround label Mar 30, 2018

hartzis mentioned this issue Mar 13, 2019

(5.x) preventDefaultTouchmoveEvent (Mobile Safari?) FormidableLabs/react-swipeable#127

Closed

reppners mentioned this issue Jun 2, 2019

Body scroll vs container scroll #149

8000 Closed

reppners closed this as completed Dec 29, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Not working with iOS 11.3 Mobile Safari #124

Not working with iOS 11.3 Mobile Safari #124

Not working with iOS 11.3 Mobile Safari #124

Not working with iOS 11.3 Mobile Safari #124

Comments