input type="range" is unusable inside modal

[shrpne]

Version

vue-final-modal: 4.4.5 vue: 3.3.4 nuxt: 3.6.5

OS

Tested on iOS Safari and on Firefox with enabled touch gestures in devtools

Reproduction Link

https://codesandbox.io/s/frosty-fire-3ztp44

Steps to reproduce

Open modal in iPhone (it should probably be reproduced on any touch device, but I tested only iPhone), try to drag the thumb

What is Expected?

Thumb should slide smoothly on the track

What is actually happening?

Thumb is stuck, sometimes it happens to jump to another position, but it is far from smooth movement

[hunterliu1003]

@shrpne This issue seems caused by lockScroll prop, set lockScroll to false can temporarily fix the drag issue but you will lose the feature of lockScroll when the modal be opened.

https://codesandbox.io/s/nervous-morse-f48xgw?file=/src/App.vue

lockScroll highly copy paste from body-scroll-lock, I'll need to look into the source code and see if I can fix it. Or re-implement my own version lockScroll with useScrollLock() in @vueuse. However I have no guarantee how much time to fix it.

[zhaivoronok]

@hunterliu1003 please use this library instead: https://github.com/FL3NKEY/scroll-lock, it is better than body-scroll-lock, because it also provides solution for fixed elements to fill gaps (data-scroll-lock-fill-gap attribute).

Also it will be very nice to have it as a dependency from vue-final-modal (maybe explicit install as requirement for modal scroll-locking) for other scroll-locking needs in projects.

[hunterliu1003]

@zhaivoronok Thank you for introducing this library. It looks pretty good to me. I will consider to replace body-scroll-lock with scroll-lock. If I decide to use scroll-lock. It's going to be a break change for vue-final-modal. It will bump the major version from v4.x to v5.0