[Bug]: When tapping the previous/next buttons multiple times it triggers page zoom

davidjerleke commented 9 months ago

Hello from the Embla side, I hope you're all doing well 👋!

Environment

Device: iPhone 8
Browser: Safari iOS 16.7.4

Link to minimal reproduction

https://www.shadcn-vue.com/docs/components/carousel.html

Steps to reproduce

Browse to the carousel page on an iOS device like an iPhone.
Tap on the next button twice or more to scroll through the carousel slides.
See the page gets zoomed which probably isn't what you wanted to do.

Describe the bug

When tapping the carousel previous and next buttons multiple times on an iOS device, it sometimes triggers an unwanted page zoom.

Expected behavior

Tapping the carousel previous and next buttons should only trigger carousel navigation and not page zoom.

Suggested solution

I believe adding touch-action: manipulation; here and here solves the problem. As MDN describes it:

Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen.

Thank you for your time!

sadeghbarati commented 9 months ago

Thanks @davidjerleke 🙏

davidjerleke commented 9 months ago

@sadeghbarati thanks for the swift response and PR 👍🏻.

unovue / shadcn-vue