Input zoom on iOS Safari

When focusing an input in iOS Safari, the whole web page will zoom by default. This is a common behavior in Safari. It's annoying, since when zooming the page, it won't zoom out as the input is no longer focused.

The solution is fairly simple, which is to add font-size: 16px to the input.

input {
font-size: 16px;
}

By the way, zooming in is a good thing. Some users might prefer to see what they're typing in a large text, but what annoys me personally is that Safari only zoom-in, and left the user figure out themselves to zoom-out. That's why I would prefer to reset that early on.

Support Defensive CSS

Do you like the content? You can buy me a cup of coffee. Thank you!

About the author

Ahmad Shadeed

Ahmad is a UX designer and front-end developer from Palestine. He enjoys working on challenging design and front-end development projects. He wrote a book on debugging CSS, writes extensively on CSS, Accessibility, and RTL (right to left) text styling.