Scroll issue on mobile devices after "touch-action: none" styling

[ins2718]

Hello everyone, I wanted to bring to your attention an issue that arose in one of the commits early in 2023 (Commit Link).

In this commit, the widget received the style property "touch-action: none", resulting in the disruption of scrolling on relevant devices. This has become a critical issue, especially on mobile phones, where the widget might occupy a significant portion of the screen.

[LefanTan]

You can get around this by adding style={{ touchAction: "pan-y" }} to the component

[nerdyman]

Thanks @ins2718 & @LefanTan,

I did add touch-action: none for a reason though I can't remember why now, might have been a Firefox issue. I'll take a look at a fix.

[ins2718]

You can get around this by adding style={{ touchAction: "pan-y" }} to the component

Yes, I fixed it by adding the class !touch-pen-y (tailwind). However, this issue was discovered accidentally and is not present on the demo pages. Therefore, I assume it's more likely a bug and should be reported.

[nerdyman]

touch-action: none was added to avoid the slider 'disconnecting' when you drag back and forth on touch devices. E.g. if you drag back and forth on Safari iOS without the style applied the slider will stop sliding if your finger or thumb isn't completely on the screen. I'll see if there's a better way to keep it sliding while dragging without stopping general scrolling - the style might just need to be applied while the slider is in the dragging state.

[nerdyman]

pan-y is now the default in v4. I need to do testing on other devices before doing a final release but there is a pre-release ready to go.

It can be installed by running:

pnpm i react-compare-slider@beta
# Or
yarn add react-compare-slider@beta
# Or
npm i react-compare-slider@beta