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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With