input[type=password] IOS not rendering keyboard (Safari+Chrome)

Question

I've noticed an issue with password inputs and IOS devices. When you focus on a password input the keyboard should display but instead I get an empty white box.

This is happening on the most basic password input:

<input type="password" name="password">

And I've tried a few variations:

<input type="password" name="password" autocomplete="new-password">

Currently I have a 'work-around' which starts the input as type="text" then once the user has keyed a character change the input type to password (which keeps field hidden/secured but allows keyboard to display). The issue with this is that is won't autocomplete existing passwords (e.g. on login screen select email + autocomplete password).

Here is the issue on Google's login screen replicated using BrowserStack (we've also replicated this issue on real device) iPhone 11 IOS 13

Update: This is effecting IOS 13 + 14, but not earlier versions.

Answer 1

From what I can gather, BrowserStack uses Screen Mirroring to display the device. Apple introduced a security update as of iOS 13 where passwords type inputs hide the keyboard on the screen you're casting/mirroring to. You can replicate this by testing it on an Apple TV, or by sharing your screen during a call. Therefore, it's not really a bug, but a limitation on testing on a platform instead of physical device.

Answer 2

Certainly this could be an iOS update bug issue, I can suggest a different way to simulate the password input...

First add this to your custom css file or anywhere you make your css classes:

Basically you are creating a class to mask the input to hide the password

/* Mask the input as password */
.password-mask {
    -webkit-text-security: disc;
    -moz-webkit-text-security: disc;
    -moz-text-security: disc;
}

Then you can use it right in your input like this:

<input class="password-mask" required type="text" autocomplete="current-password">

For the autocomplete attribute, you need to use: current-password in order to make it behave as the password input.