Amphtml: amp-consent UI: Remove Iframe Border from CMP Iframe on fullscreen

[torch2424]

relates to: #17742

See this comment: https://github.com/ampproject/amphtml/issues/17742#issuecomment-469401642

cc @zhouyx @jawadst

[torch2424]

@jawadst

I tried to get the border to appear on our CMP Example page, and couldn't get it to show:

This is me testing on all 3 major browsers. And I noticed everything is the same in the "fullscreen" mode as well.

So I guess some follow-up questions:

1. Which browsers is this affected?

2. Can you provide an example of the behavior?

If you are referring to the border shadow, that was something requested by our designer. I can go ahead and ask their opinion if you would like.

[MaximePlancke]

Hi @torch2424

I am part of the Didomi team and work with @jawadst on the AMP implementation
We are referring to this:

background: hsla(0,0%,100%,0.7); in the amp-consent.

border-top-left-radius: 8px!important;, border-top-right-radius: 8px!important; and box-shadow: 0 0 5px 0 rgba(0,0,0,0.2)!important; in the amp-consent.i-amphtml-consent-ui-iframe-active.

It would be nice to let the CMPs handle the style themselves.

Also, do you have any requirements on how CMPs have to implement their banners? For example for the full screen mode, we are using a popup. It is something possible or do we need to fill the entire screen?

[torch2424]

@MaximePlancke Hello! Nice to e-meet you! 😄

So the thing about the styles you mentioned is that those styles are applied on the AMP page itself. All CMP styles are Iframe-d therefore, a CMP wouldn't be able to escape the iframe and apply styles to the base page unfortunately. 😞

But I can make a compromise, is the border radius at fullscreen your issue. I'm open to removing the border radius and box shadow on fullscreen if that is what you would like 😄

Also, do you have any requirements on how CMPs have to implement their banners? For example for the full screen mode, we are using a popup. It is something possible or do we need to fill the entire screen?

Could you send a screenshot or example? I can't think of any hard requirements. I would need some context to visualize the popup 😄

Thank you!

[MaximePlancke]

Hi @torch2424

Nice to e-meet you too!

But I can make a compromise, is the border radius at fullscreen your issue. I'm open to removing the border radius and box shadow on fullscreen if that is what you would like 😄

Yes that would be great if we could remove the border-radius and box-shadow on full screen as we are using a popup with a backdrop and not a banner that will expand from 30vh to 100vh.

Could you send a screenshot or example? I can't think of any hard requirements. I would need some context to visualize the popup 😄

As @jawadst mentioned here: https://github.com/ampproject/amphtml/issues/17742#issuecomment-469401642 , we are using a popup with a backdrop. I was just asking if there is any requirement of filling the entire screen but I imagine there isn't :)

[torch2424]

@MaximePlancke

Yes that would be great if we could remove the border-radius and box-shadow on full screen as we are using a popup with a backdrop and not a banner that will expand from 30vh to 100vh.

Awesome, I went ahead and changed the title of the issue to reflect this, and will get a PR out soon 😄

As @jawadst mentioned here: #17742 (comment) , we are using a popup with a backdrop. I was just asking if there is any requirement of filling the entire screen but I imagine there isn't :)

Ahhhh I get it now. Didn't realize the popup was in the iframe itself 😄 Thank you!

[MaximePlancke]

@torch2424 Thank you for your reactivity :)

[torch2424]

@MaximePlancke Glad I could Help!