TIL: You can use css to remove the double-tap zoom feature on iOs

I've been building an new website with lots of number inputs. The browser default number inputs tend to have very small step-up and step-down buttons. (the little arrow buttons that increment the value up or down one step)

So, I made my own step buttons to make the targets easier to click. They worked fine, except on iOS devices. By default on iOS, double-tapping on an element zooms in.

Since these buttons are pressed many times in a row, you end up having to zoom out every time you use them. It's very annoying.

Anyway, here's a simple css solution that stops the double-tap zoom.

button {
    touch-action: manipulation;
}

touch-action is a css property that defines how an element can be used by a touch screen.

Of course, you shouldn't stop everything being zoomable, just specific elements that are causing trouble.

You can see the number input in action on this simple dice rolling tool I made.

Comments

[Ben Nadel]

Ahhh, perfect. I had never seen this property before. I had an "increment" button that was zooming-in if pressed in quick succession. This seems to have solved it. Awesome!

[GreggHume]

Thank you!