iOS Safari/Chrome - Unwanted scrolling when focusing on input fields

Question

Tested in Safari and Chrome - the same result, so I think it's an iOS issue.

While we focus inside on input open the keypad and show a horizontal scrollbar on the body. this same thing working fine in android Mobile.

This issue with all forms input is not for this specific page.

Click on that URL will get a GIF file with an issue that we have faced. http://exploded.rebuildsucceeded.com/images/uploaded/onepagecheckout.gif

The image size is too large that why uploaded on our staging server.

This same issue you can also reproduce on this website as well: http://exploded.rebuildsucceeded.com/register?returnUrl=%2F

Answer 1

iOS will zoom into a input if the font-size is less than 16px.

You have a couple of options to prevent this:

Increase font size

Set font-size to at least 16px for your inputs in your CSS.

Add maximum-scale=1

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Note that this option can disable the pinch-to-zoom functionality on Android devices, although not on iOS.