search

techniq / svelte-ux

Collection of Svelte components, actions, stores, and utilities to build highly interactive applications.
https://svelte-ux.techniq.dev/
MIT License
663 stars 33 forks source link

Number Stepper should use touch-action: manipulation #412

Closed domhel closed 3 weeks ago

domhel commented 3 weeks ago

Hi, first of all, cool project. When scrolling through the components, I've noticed that the number stepper would zoom in on mobile devices after tapping twice. I had this issue myself a few weeks ago.

Sorry that I don't have the time right now to dig into the code and create a PR, but the NumberStepper buttons should use the css property: touch-action: manipulation; More info: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Maybe this is also relevant for other buttons, I am not sure.

Thanks :)

techniq commented 3 weeks ago

@dippa-1 Good callout! I added it to all <Button> instances by default as I think it made the most sense.

A lot of the times I'll add touch-action: pan-x pan-y to the body of my sites since they are more app-like, but it's a bit heavy handed (there are always cases where it can be nice to pinch-zoom, such as looking closer at an image).