IOS devices issues with HTML form input (type = text)

Question

So I have an HTML login form with two fields: Email and Password. These can be filled easily on any device's browser other than IOS devices(iPhone,iPad). On IOS fields can hardly be in focus and once in focus,the keyboard pops up, I start typing but nothing is actually being filled. I have tried in both Chrome and safari and still get the same result. Field remains blank. Below is how my form is formatted:

<form method="post" name="login" action="login">
   <div class="divInputWrapper ">
      <i class="icon-envelope inputIcon inlineElt"></i>
      <label for="email"></label>
      <input type="text" name="email" placeholder="Enter your email address" class="formInput"/>
   </div>
   <div class="divInputWrapper ">
      <i class="icon-envelope inputIcon inlineElt"></i>
      <label for="password"></label>
      <input type="password" name="password" class="formInput"/>
    </div>
    <button class="blue centeredContent">Login</button>
</form>

I tried adding an autofocus attribute, preset a value and still the same.

Answer 1

Found the issue, it's a stylesheet reset I found online to help with touch devices behaviour for when the user touch/ hold an element and I copied it across most of my projects. So if you have this issue, it's most likely you have these lines in your css:

  *, *:before, *:after {
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
     }

So just remove it or set it to default. And if your intention is to stop people from selecting stuff on your website, then make sure you reset this style property to default on inputs

  input, input:before, input:after {
      -webkit-user-select: initial;
      -khtml-user-select: initial;
      -moz-user-select: initial;
      -ms-user-select: initial;
      user-select: initial;
     } 

Answer 2

I had a similar problem, but its cause was very specific. I hope someone will still find it useful.

I use webp-hero polyfill for .webp images support in Safari and it turns out, it's causing this problem on iOS devices. This is a known bug on their side, but I struggled forever to connect the dots.

Unfortunately, I don't have a good solution for this. For now, I avoid using .webp images on pages with forms.

Answer 3

The issue is happening because of your unsupported font. If you want the input field or password to be supported on Mac os (Chrome or Safari)

use

line-height:24px;
font-family: sans-serif;
display:block;

Check This fix and let me know.