[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.

Reproduction

• 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.

System Info

Device: iPhone 8
Browser: Safari iOS 16.7.4

Severity

annoyance