tuax / tua-body-scroll-lock

🔐 Body scroll locking that just works with everything
https://tuax.github.io/tua-body-scroll-lock/
MIT License
418 stars 30 forks source link

bug: Zooming works inconsistently on iOS Safari #77

Closed lampkraft closed 1 week ago

lampkraft commented 1 month ago

Version 1.5.0

Describe the bug Zooming works inconsistently on iOS Safari. Works only sometimes, it seems like scrolling the content helps (setting the proper focus on the element?).

To Reproduce Steps to reproduce the behavior: This can be reproduced in the react project example:

  1. Open dialog one
  2. Try zooming in on any of the scrollable contents.
  3. Zooming only works sometimes, never at first and only sometimes when the content has been interacted (scrolled) with.

Demo Might be hard to see in the video since the touch events are not visible, but I am trying to zoom the content a lot and it only zooms sometimes:

https://github.com/user-attachments/assets/f163842a-764e-4d5b-b20b-b649c261084b

Expected behavior Zooming should work smoothly even when using the scroll lock.

Additional context In my own project zooming almost never works in dialogs/modals when using this body scroll lock. I suspect it has to do with src/methods.ts#L36 which looks to be preventing multi-touch events: https://github.com/tuax/tua-body-scroll-lock/blob/a8e4909bdbcf7a06cb47bd5d6b4f2fdb9cb2dbaf/src/methods.ts#L36

BuptStEve commented 1 month ago

emmm, good question

septem1997 commented 1 month ago

+1

lampkraft commented 1 week ago

A question: are there other reasons for having this check? Ofc the user is able to scroll the body using two fingers otherwise, but is this a big issue in general? I feel like the tradeoff maybe isn't worth it, just removing this check works ok on iOS as far as I can tell.

if (event.targetTouches.length !== 1) return

BuptStEve commented 1 week ago

A question: are there other reasons for having this check? Ofc the user is able to scroll the body using two fingers otherwise, but is this a big issue in general? I feel like the tradeoff maybe isn't worth it, just removing this check works ok on iOS as far as I can tell.

if (event.targetTouches.length !== 1) return

LGTM, we'll publish a new release~

BuptStEve commented 1 week ago

dist-tags: latest: 1.5.0 next: 1.5.1-beta.1

npm i tua-body-scroll-lock@next
lampkraft commented 6 days ago

Thank you 🌟