Cursor cannot focus on the input field on iPhone (Fixed)

  • Posted on: 1 December 2017
  • By: jmu

Recently, we tried to build a form on a pop-up layer. But when we tested on the real phone, we found that the cursor cannot be focused inside of the input field on iPhone 6 (that's the only iPhone version we have currently). We were using some CSS code to fix this bug.

iPhone safari is not very stable once you use "position: fixed" and "input" at the same time.

Here is a screenshot showing on my screen:

cursor position issue inside of input field on iPhone

 

Here are some suggestions for fixing this issue:

1.  Add some CSS code for "html" & "body". This fixed half of my input style issue.

  html, body {
      -webkit-overflow-scrolling: touch !important;
      overflow: auto !important;
      height: 100% !important;
  }

 

2. Some people suggest adding the following code. (This doesn't work for me)

  input,select,textarea{
      -webkit-user-select: text; /* Chrome, Opera, Safari */
      -moz-user-select: text; /* Firefox 2+ */
      -ms-user-select: text; /* IE 10+ */
      user-select: text; /* Standard syntax */
  }

 

3. Change "position:fixed" to "position:absolute" for the form or parent layer. This works like charming!!!

 

Hope these suggestions will help.

 

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.