tuax
bug: Zooming works inconsistently on iOS Safari
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:
- Open dialog one
- Try zooming in on any of the scrollable contents.
- 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
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
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~
dist-tags: latest: 1.5.0 next: 1.5.1-beta.1
npm i tua-body-scroll-lock@next