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.
Hello from the Embla side, I hope you're all doing well 👋!
Environment
Link to minimal reproduction
https://www.shadcn-vue.com/docs/components/carousel.html
Steps to reproduce
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:Thank you for your time!