iOS - dragging slider handle also scrolls screen

[Catchwa]

This is similar to #258 but the solution there (adding touch-action: none) doesn't work because iOS doesn't support it - see https://caniuse.com/#feat=css-touch-action

Safari uses passive document touch listeners by default as of iOS 11: https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_11_1.html

In createSlider.jsx changing:

    addDocumentTouchEvents() {
      // just work for Chrome iOS Safari and Android Browser
      this.onTouchMoveListener = addEventListener('touchmove', this.onTouchMove);
      this.onTouchUpListener = addEventListener(this.document, 'touchend', this.onEnd);
    }

...to...

    addDocumentTouchEvents() {
      // just work for Chrome iOS Safari and Android Browser
      this.onTouchMoveListener = this.document.addEventListener('touchmove', this.onTouchMove, {passive: false});
      this.onTouchUpListener = addEventListener(this.document, 'touchend', this.onEnd);
    }

...appears to work. I'm not sure whether it's worth registering the listener against a narrower area of the DOM though (as opposed to the whole document)?

this solution likely breaks IE support, though: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener ...so you'd have to add some browser detection around it.

[njbmartin]

Further to this, it's difficult to interact with the examples on a mobile.

[gdelmas]

is this something you would accept a MR for?

[verekia]

Did anyone find a workaround for this?