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

Answer 1

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 2

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 3

In my case problem was with the angular-material package, version 1.1.2. After the update (1.1.18), everything works as expected.