[bug]: Tapping the carousel previous/next buttons multiple times on iOS devices triggers page zoom

[davidjerleke]

Describe the bug

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

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

Suggested solution

I believe adding touch-action: manipulation; to the previous and next buttons 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.

• See this PR from shadcn-svelte that solves the problem: fix: Carousel next and previous button touch action styles huntabyte/shadcn-svelte#654.

Affected component/components

Carousel

How to reproduce

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

Codesandbox/StackBlitz link

https://shadcn-solid.com/docs/components/carousel

Logs

No response

System Info

Device: iPhone 8
Browser: Safari iOS 16.7.4

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[hngngn]

Thanks for the reference! That's really helpful.