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

sek-consulting / solid-ui

Beautifully designed components. Built with Kobalte & corvu. Styled with Tailwind CSS.

https://www.solid-ui.com

MIT License

674 stars 25 forks source link

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

Closed davidjerleke closed 2 months ago

davidjerleke commented 2 months ago

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: https://github.com/huntabyte/shadcn-svelte/pull/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