Lock: Login and Sign Up Popup renders blank on iPhone Browser (after upgrading to 11.12.1)

[ak99372]

Description

After upgrading to 11.12.1 (from 11.11.0) the website popup renders blank on some iPhone devices (reproduced on iPhone X iOS11, iOS12)

NOTE: This issue does not exist on 11.11.0

Environment

• Lock version: 11.12.1
• Browser version: iPhone X
• OS: iOS 11, 12

Code snippet/reproduce:

import { Auth0Lock } from 'auth0-lock';
const lock = new Auth0Lock(Auth0Config.clientId, Auth0Config.domain, {
    allowLogin: true,
    allowSignUp: true,
    allowForgotPassword: true,
    closable: true,
    allowedConnections: null,
    rememberLastLogin: false,
    hashCleanup: false,
    mustAcceptTerms: false,
    defaultADUsernameFromEmailPrefix: false,
    socialButtonStyle: 'small',
    configurationBaseUrl: 'https://cdn.auth0.com'
});

lock.show({
            allowLogin: true,
            allowSignUp: true,
            allowForgotPassword: true,
            initialScreen: 'login'
        });

[crypto-jones]

My team and I are having the exact same issue.

[luisrudge]

Do you have a specific website I can test? I just tested http://brucke.club and it works on my iPhone XR.

[crypto-jones]

https://proofd.app
About 30% of the time, nothing will pop up when logging in /signing up on an iOS device.

[luisrudge]

@crypto-jones can you see if this css helps? https://github.com/auth0/angular-lock/issues/38#issuecomment-385995202

.auth0-lock.auth0-lock .auth0-lock-form {
  display: initial !important;
}

[atalebagha]

I'm having this issue on react-native WebView on iOS 12

[luisrudge]

@atalebagha can you test if the css snippet above fixes your issue?

[atalebagha]

Yes it fixes the issue.

[arvidkahl]

Funny enough, switching device orientation does seem to fix it (which I assume is due to the re-render). Advise your users to turn their phones :)

It still initially renders empty reliably on my iOS devices. The css snippet above seems to break the layout:

Any other ideas?

[arvidkahl]

I guess if you can live with the lack of padding (in lieu of trying to fix it manually with more css), this changed css will target iphones only (using .auth0-lock-iphone) and not re-style any desktop version.

.auth0-lock-iphone.auth0-lock .auth0-lock-form {
  display: initial !important;
}

[arvidkahl]

Furthermore, I would like to point out that the fix for this from May 2018 at https://github.com/auth0/lock/pull/1365 was reverted later in https://github.com/auth0/lock/commit/93e4a04eee779efc036caa3915da0975ca01ac48#diff-6e75cf9db4a3c7d943f8603dc182c0e9L314

I am not sure if that was intentional, but even with the latest 11.14.1 lock.js this is what happens more than 50% of the time:

(without the above css addition)

(with the above css addition)

Simulator, iOS 12.1, iPhone X. Same problem on real device.
Viewport being <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />, same problem with the viewport suggested by the lock11 docs. I also disabled all other external css, same problem.

[alacret]

This is still happening in v11.16.0

You can go to: pex.cobuildlab.com

[jasonkim]

A couple things I've discovered while looking at this bug (it's happening to us as well).

1. Difference between 11.11.0 and 11.12.0 (and what I think is relevant).

2. Using safari and spoofing my user agent as iOS, I am seeing different results for computed value of display on the div. When div does not have display set explicitly, it renders as display:block. When div is set to display:initial, it renders as display:inline. These were observed using the computed tab.

Based on these, I believe the css treatment for the auth0-lock-form div went from inline to block. The padding was moved from auth0-lock-content div to auth0-lock-form div, but that has no effect when div is inline. That's why the padding is gone in the temp fix.

My fix for this for now is this. (I've found that it also repros without user agent being set to iOS/iphone)

.auth0-lock .auth0-lock-form {
  display: initial;
}
.auth0-lock .auth0-lock-content {
  padding: 20px;
}

[vladys-k]

Try to use in the HTML <head> tag or within CSS

<style>
 .auth0-lock-container {
     height: 90vh !important;
 }
</style>

[luisrudge]

Hi there! I came back to fix this issue but I can't reproduce it anymore with 11.7. Can someone validate that this is fixed in this version and, if you're still having this issue, send me a link to reproduce it?

[ajmueller]

@luisrudge do you mean 11.17? I just tested 11.17.2 in an iOS 13 simulator with our AngularJS app and removed our CSS fix. As you can see, the popup is still rendering blank.

[luisrudge]

@ajmueller ok perfect. I tried to run outside of an angular app and couldn't repro. Can you put a simple repro of angular+lock with this issue on github? I'll clone and work based on that. Thanks!

[ajmueller]

@luisrudge I've created a repository you can clone. I've tested this on Xcode's iOS 13 simulator and it reproduces the error as expected.

A couple notes:

• This is built off of angular-seed which has a less than ideal build pipeline, but so it goes when working in the AngularJS world. This should hopefully have everything you need to work on the issue, however.
• I'm using Node 12 and have added an nvmrc file accordingly.
• You'll need to add an Auth0 Client ID and Domain in app/services/auth.js to get this to load.

[luisrudge]

@ajmueller thank you so much for this! It's perfect. I'll repro and find a way to fix it 🎉