I stumbled across this great project by Barry Prendergast. It's a web-based radio player with a lush UI. On mobile I spotted that as I was rapidly flicking through the stations to find one that was on air, the browser was zooming in and out.
Here's a screen clip:
Watch the video.
I thought this behaviour was related to their viewport meta tag setup, but they have that set up perfectly:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Now, you could prevent the zooming by adding , maximum-scale=1.0, user-scalable=no to the content attribute, but don't do that because it prevents zooming at all, which is a WCAG violation.
What's actually happening here is the browser is responding to the double tap gesture, which in the case of Safari on iOS, zooms into the button element I'm tapping. Luckily there's a CSS one-liner for us that gets the job done.
.button {
touch-action: manipulation;
}
As per MDN:
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. This is an alias for "pan-x pan-y pinch-zoom" (which, for compatibility, is itself still valid).
Let's see it in action. First, here's a couple of buttons without touch-action. Try rapidly tapping on your phone/touch device:
See the Pen Buttons without touch-action applied by Andy Bell (@piccalilli) on CodePen.
This link has no CodePen framing to make that easier for you
Here are the same buttons with touch-action applied:
See the Pen Buttons with touch-action applied by Andy Bell (@piccalilli) on CodePen.
Again, here's a frameless version for you
Handy!