Lock: Login- and signup-button are cutoff on Android phones with screen ratio 19.5:9

[evenka]

Description

Both the login- and signup-button are cutoff and partially hidden from view. When scrolling the button is correctly rendered, but this is nonetheless a buggy experience for new users trying to create an account.

Environment

Please provide the following:

Lock version: 11.15

• Device: OnePlus A6013
• Browser version: Chrome 75.0.3770.143

• OS: Android 9

• Device: Huawei Mate 10

• Browser version: Chrome 75.0.3770.143
• OS: Android 9

Reproduction

1. Navigate to development.equlitycheck.it.
2. Signup as a new user.
3. The Auth0-popup consistenly produces the bug for affected phones.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you have not received a response for our team (apologies for the delay) and this is still a blocker, please reply with additional information or just a ping. Thank you for your contribution! 🙇‍♂️

[fsc7]

I am having the same issue with samsung galaxy s6.

[fsc7]

My problem happens in Chrome, it seems that the CSS style is considering the whole viewport but Chrome is using some pixels on top with its toolbar. This should resolve the problem:
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

[madine]

Having the same issue on chrome too (pixel 1)

[fsc7]

Is it possible to reopen this issue?

[erowell]

I have this issue on a samsung note 8 using chrome as well, can this be re-opened?

[stevehobbsdev]

Yes, let me re-open and investigate.

[stevehobbsdev]

👋 I have raised #1785 which should fix this, thanks to @fsc7 for the pointer to the fix. I tried to test on as many devices in Browserstack that I could (screenshots in the PR).

[erowell]

@stevehobbsdev - Thanks for re-opening the issue and the quick turnaround on that fix!

[fsc7]

Hello,
Thanks @stevehobbsdev for the work on the issue, I just could take a look at it now. When should I see the results? In my mobile Samsung S6 I still get login page cut.

[stevehobbsdev]

@fsc7 Are you using the hosted login page? We haven't released the build yet so you won't see it on live. I'm hoping to do that later today; will report back once it's out.

[fsc7]

Great, looking forward to that. Thanks.

[fsc7]

I still have the issue and I noticed that in your tests you don't have the social buttons enabled. Do you think this might be causing problem in my case?

[stevehobbsdev]

@fsc7 Even though I didn't have any screenshots for this, I'm pretty sure I tested this 🤔 let me try again and come back to you

[stevehobbsdev]

@fsc7 I have some social connections enabled and the issue is still resolved for me:

If you are still getting issues with the login button, could you please raise a new ticket with some more screenshots of what you're seeing? Just don't want this to get lost.

[fsc7]

Hello, here it goes

[fsc7]

This issue should not be closed since the problem persists.

[stevehobbsdev]

@fsc7 Can you confirm which version of Lock you are using? Are you using the default, uncustomized template or are you using a custom version?

[fsc7]

Hello @stevehobbsdev , I am sorry, my fault, I updated the lock version to the latest and it is working fine now. Many thanks.

[stevehobbsdev]

@fsc7 No problem! Glad it's fixed :)