🐛amp-consent: Fixed URL Bar resizing for CMP Iframe modal#20100
🐛amp-consent: Fixed URL Bar resizing for CMP Iframe modal#20100torch2424 merged 2 commits intoampproject:masterfrom
Conversation
|
|
||
| /** | ||
| * CMP Modal class appolied when asking for CMP consent. | ||
| * See: https://developers.google.com/web/updates/2016/12/url-bar-resizing |
There was a problem hiding this comment.
Thank you @torch2424, the comment is very useful!
I have one question after reading the doc. I saw
There is one exception to the above changes and that is for elements that are position: fixed. Their behavior remains unchanged. That is, a position: fixed element whose containing block is the ICB will resize in response to the URL bar showing or hiding.
Do we still need to change 100% to 100vh if we apply position: fixed here?
There was a problem hiding this comment.
Yes, this is because even though the viewport height and percentages are the same end value, during the transition, viewport units will be calculated, but percentage based values will jump from the before and after.
Try the demo they linked in the article: https://bokand.github.io/demo/urlbarsize.html
And you will see that when the url bar hides, the percentage based vertical div will jump sizes, instead of being consistent 😄
| * For the reasoning of mixing percentages with viewport units | ||
| */ | ||
| amp-consent.i-amphtml-consent-ui-iframe-active { | ||
| position: fixed !important; |
There was a problem hiding this comment.
This isn't needed, will should be removed.
zhouyx
left a comment
There was a problem hiding this comment.
Thank you @torch2424 for the investigation!! Definitely LGTM!! As we agreed it would be great to move comment around so that people don't change the 100% 100vh here.
| * For the reasoning of mixing percentages with viewport units | ||
| */ | ||
| amp-consent.i-amphtml-consent-ui-iframe-active { | ||
| position: fixed !important; |
There was a problem hiding this comment.
Discussed offline. This should be safe to remove because we've already applied position: fixed to amp-consent.
…#20100) * Fixed URL Bar resizing for CMP Iframe modal * Made CSS Comment changes
closes #19969
This fixes URL Bar Resizing for both Mobile Safari and Mobile Chrome for the amp consent modal. In the sense that, the element is not cut off by any of the url/nav bars, and transitions smoothly along with them.
This also includes some small changes to the example, to make mobile testing easier, and fix the
diy-consentbuttons on mobile safari.Note
We should document for the full screen case that the safari nav bar can cover the bottom of their content, thus, we should advise them to leave some padding. Our only other option (I could find), was the make the
height: 100%, but this will not transition smoothly, and gives a bad UX in my opinion.GIfs
Before
After