Question 36879 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

iOS Safari/Chrome – Unwanted scrolling when focusing on input fields – Jquery

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

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    For those who hit this and the solution is still not enough, I solved my one case by switching from using display: relative to display: absolute in one of my containers and only then Safari stopped scrolling the page when focusing on the input.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search