Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
ak99372 opened this issue Jan 11, 2019 · 18 comments · Fixed by #1745
Closed

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

ak99372 opened this issue Jan 11, 2019 · 18 comments · Fixed by #1745
Assignees
@stevehobbsdev
Labels
bug This points to a verified bug in the code

Comments

@ak99372
Copy link

ak99372 commented Jan 11, 2019

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
Copy link

My team and I are having the exact same issue.

@luisrudge
Copy link
Contributor

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

@crypto-jones
Copy link

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

@luisrudge
Copy link
Contributor

@crypto-jones can you see if this css helps? auth0/angular-lock#38 (comment)

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

@atalebagha
Copy link

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

@luisrudge
Copy link
Contributor

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

@atalebagha
Copy link

Yes it fixes the issue.

@arvidkahl
Copy link

arvidkahl commented Mar 30, 2019 •
edited
Loading

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:

Screenshot 2019-03-30 17 21 40

Any other ideas?

@arvidkahl
Copy link

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
Copy link

arvidkahl commented Mar 31, 2019 •
edited
Loading

Furthermore, I would like to point out that the fix for this from May 2018 at #1365 was reverted later in 93e4a04#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)
Screenshot 2019-03-31 12 05 26

(with the above css addition)
Screenshot 2019-03-31 12 06 37

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
Copy link

alacret commented May 21, 2019

This is still happening in v11.16.0

You can go to: pex.cobuildlab.com

Screen Shot 2019-05-21 at 5 08 32 PM

@luisrudge luisrudge added the bug This points to a verified bug in the code label May 22, 2019
@jasonkim
Copy link

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
Copy link

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

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

@luisrudge
Copy link
Contributor

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
Copy link

@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.

image

@luisrudge
Copy link
Contributor

@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
Copy link

@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
Copy link
Contributor

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

@stevehobbsdev stevehobbsdev self-assigned this Oct 28, 2019
@stevehobbsdev stevehobbsdev mentioned this issue Oct 28, 2019
Merged
9 tasks
@stevehobbsdev stevehobbsdev mentioned this issue Jul 23, 2020
Merged
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@stevehobbsdev stevehobbsdev

Labels
bug This points to a verified bug in the code
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Reset .auth0-lock-form display to 'initial' for iPhone auth0/lock
10 participants
@jasonkim @stevehobbsdev @alacret @luisrudge @arvidkahl @ajmueller @atalebagha @ak99372 @vladys-k @crypto-jones