Problem Statement
When using Lock Passwordless email login on iOS devices and using Safari, tapping the field to enter an email will cause the viewport to zoom in slightly. After filling in an email and hitting enter on the popup keyboard, the viewport does not zoom back out and the Submit button is covered by the bottom toolbar. Users need to either scroll down or zoom back on their device to see the Submit button.
Steps to reproduce
- Use Auth0LockPasswordless in the Universal Login.
- Initiate a login with a passwordless email.
- Using an iOS device with Safari, tap the email field on the login page to see the view zoom-in.
- After entering an email, hit enter and see that the view is still zoomed in and see the Submit button is hidden at the bottom.
Cause
This is the expected behavior depending on the iOS version and type of device. While we already have provisions in place to respond to changes in window size/viewport and etc, which are changed on Android when the soft keyboard is shown. Unfortunately, in iOS/Safari, no resize events were raised nor the viewport was changed when the soft keyboard is shown. So we have no way to detect when this situation occurs.
Source: Submit button is lost on safari mobile when keyboard is up · Issue #1991 · auth0/lock · GitHub
Solution
Our engineers have looked into potentially doing something where we react to focus/blur events on all the input boxes and put a fixed-height margin below the button, but this is error-prone and not something they can recommend.
On the other hand, you may be able to handle this by adding event handlers and the necessary style rules. This third-party article explains the problem and potential workarounds.
Source: Submit button is lost on safari mobile when keyboard is up · Issue #1991 · auth0/lock · GitHub