Slider not responding to touch events (drag, click etc)

[orzsikodon]

Steps to reproduce

1. This issue is rather hard to reproduce and happens rarely and non-deterministically.

Expected behaviour

If i touch or click the slider, it should work and usually it does. However:

Actual behaviour

Sometimes the rzSlider stops responding to touch events. I know that it is still working because from a different part of the app, I'm setting the slider value programmatically and the slider position gets updated, however, if I try to drag or click the slider nothing happens unless I restart the Angular/Ionic app.

Has anyone encountered the problem when the slider stops responding to touch events but works programmatically? Any ideas what might be causing this? Solutions perhaps? Thanks

[ValentinH]

Unfortunately, this is the first time somebody reports such an issue.
Without a reproduction, it's impossible to investigate... :/

[orzsikodon]

Alright, thanks Valentin. I'll let you know if I'm able to reproduce it!

[orzsikodon]

Hi @ValentinH, I'm finally able to consistently reproduce the above issue. Seems like this is a problem affecting iOS devices.

I have a slider at the bottom of my screen and when I swipe up from my app to open the Control Center menu, after a couple of tries swiping up, the slider stops responding to touch events. I can still change the value and position of the slider programmatically, but not via touch. Any ideas?

[ValentinH]

Touch events are so painful to handle for iOS, nothing is standard. 😞

I had several issues with several iOS version for https://github.com/ricardo-ch/react-easy-crop too.

Sometimes, you just need to add some css rules or gesture handlers but this needs investigation.

[orzsikodon]

Hi @ValentinH thanks for the prompt response! Do you have any idea how to go about investigating this? Our app is a cordova/ionic application and I'm not really sure how to go about investigating the gesture handlers. Thanks!

[ValentinH]

When I mentioned gesture handler, I meant something like this: https://github.com/ricardo-ch/react-easy-crop/blob/master/src/index.js#L36

[orzsikodon]

Hi @ValentinH is there a chance you'd take a look at this iOS gesture handle bug?

[ValentinH]

No sorry, this is quite an edge case and I don't have the time to fix it.

[orzsikodon]

@ValentinH, No worries, I understand.

However, this is a serious issue for me so I'd like to find a workaround, potentially even attempt a fix. Could you point me in the general direction of how to debug this? Maybe some ideas for a workaround? I'm using AngularJS + Ionic. Any help is greatly appreciated.

[edvanmc]

I'm facing the same problem on iOS, what makes impossible to use the solution on devices running this OS. This is a great project and we need to solve this problem to make it usable for everyone.

[ValentinH]

I understand this is important for you guys but I don't have an iOS device to test this issue and I'm not really maintaining this library anymore.

PRs to fix it are more than welcome though.

To debug this kind of issue, I would add some logs on every touch handlers and functions that add/remove those handlers. The hotel is to understand if the event are fired but not handled properly by the library for some reasons or if they are not fired at all.

[Tumetsu]

For whatever it's worth I had similar issue on iOS devices. Turns out the culprit was another library (in my case the body-scroll-lock which on iOS prevented touch events from reaching the slider's listeners.

So if you encounter this issue, check if you have other libraries which handle touch-events and possibly prevents them.

[257kyle]

For users of AngularJS facing this issue, simply reinitializing the rzslider using "ng-if" will get it to work again.