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.

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

Incorrect height of amp-consent when navigation bar is displayed #28133

Closed
MaximePlancke opened this issue Apr 30, 2020 · 6 comments · Fixed by #28290
Closed

Incorrect height of amp-consent when navigation bar is displayed #28133

MaximePlancke opened this issue Apr 30, 2020 · 6 comments · Fixed by #28290

Comments

@MaximePlancke
Copy link
Contributor

MaximePlancke commented Apr 30, 2020

What's the issue?

amp-consent is loading an Iframe which takes 100vh when the full screen mode is activated. This 100vh includes the navigation bars on iOS devices and some Android which doesn't let the user scroll down to the bottom of the Iframe. It is a problem for us as we have our action buttons inaccessible. Instead of using 100vh, could you make sure the Iframe takes 100% of the visible height?

A working solution would be to remove the height: 100vh and add

min-height: -webkit-fill-available;
min-height: 100%;

It is a blocking issue on our side. Thank you.

How do we reproduce the issue?

https://sandbox.didomi.io/amp.html

Don't scroll the page, click on Learn More and try to scroll down. You won't be able to reach the bottom buttons.

What browsers are affected?

This example is on an iPhone 8 with iOS 13.4 on Safari but you can find this issue on a lot of iOS devices.

Which AMP version is affected?

2004240001480

@micajuine-ho
Copy link
Contributor

micajuine-ho commented May 1, 2020

Hi @MaximePlancke I am unable to reproduce the error with the website you linked. Would you be able to make a gif of the error and post it here?

@MaximePlancke
Copy link
Contributor Author

MaximePlancke commented May 4, 2020

Hi @micajuine-ho ,

Sure, here it is
ezgif-5-1a853778fc0b

FYI, the action buttons are in a sticky footer which is fixed to the bottom of the Iframe. If you check the height of the Iframe you will see that around 20% of the bottom is hidden.

Don't hesitate if you need more information.
Thank you!

@micajuine-ho
Copy link
Contributor

micajuine-ho commented May 5, 2020

Hi @MaximePlancke,

I have tried to reproduce with safari and an iphone 8 to no avail. Do you notice anything wrong with this?
image

@MaximePlancke
Copy link
Contributor Author

MaximePlancke commented May 5, 2020

Hi @micajuine-ho ,

The Safari responsive mode doesn't properly simulate a real device and the behavior is not 100% accurate. (Example: no navigation bar here). You need to test with Xcode using a simulator or with a real device to be able to see the issue.

@zhouyx
Copy link
Contributor

zhouyx commented May 7, 2020

Related to #20100.

@micajuine-ho
Copy link
Contributor

micajuine-ho commented May 8, 2020

@MaximePlancke Thanks for your help! I'm able to repro the issue now. I will update when I make progress.

Would you be able to spin up a quick jsbin/example that I can test locally?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants