Amphtml: Sticky ad isn't pinned to the bottom of the viewport

[jasti]

Was able to reproduce on Android Chrome on Google Search and Android Google Play Newsstand but not on iOS Chrome Search.
http://www.nydailynews.com/amp/new-york/woman-hits-tribeca-architecture-firm-sexual-harrassment-suit-article-1.3001566

[zhouyx]

it is because margin-bottom is set on sticky-ad. Quick fix would be adding margin: 0 !important to prevent this kind of unwanted margin. But in earlier discussions, we also want to give users this kind of flexibility.

[lannka]

Thanks @zhouyx for looking into it.

Indeed, the margin is introduced by publisher's own CSS (accidentally). It is not Chrome-only because we handle fix-positioned items differently on iOS. The work around we took to make fix-position working in an iOS iframe, accidentally bypassed publisher's CSS (honestly, this could be a problem in other cases @dvoytenko ).

Closing this for now.

[jasti]

I was talking to @zhouyx and we were wondering if there was a way to ignore inheriting margin attributes from the parent, as is happening in this case.
This is clearly happening unintentionally and I recommend we do everything we can to avoid the behavior.

[lannka]

well, it's hard to fix a publisher's own styling bug in AMP. any extra CSS we introduce is very easy to break others. The bottom margin could be intentionally added by pub to allow a toolbar at the bottom. We never know.

[dvoytenko]

I don't think the current design and implementation allow the bottom margin. I'd rather we set margin-bottom: 0 !important.

[zhouyx]

I was talking to @zhouyx and we were wondering if there was a way to ignore inheriting margin attributes from the parent, as is happening in this case.

@jasti I searched around and unfortunately there's no way to do this.

The other way would be us setting margin-bottom: 0 !important This was not added at first because we don't want to put too much restrictions on style. And it is possible that user want to set margin to avoid hiding a fixed position footer.

If we add the extra rule, how can we make sure the margin-bottom: 0 !important wouldn't be a breaking change to some existing pages?

[jpettitt]

FWIW the margin change proposed won't break any of our sites.

[lannka]

thanks @jpettitt .

@dvoytenko , isn't a fix-positioned footer toolbar a realistic design?

Overall, I'm reluctant to add CSS rules. Once added, very hard to change or remove.

[cramforce]

I'm all for margin-bottom: 0 !important. That is the very intent of this component.

[dvoytenko]

@lannka Toolbar could be realistic, but, IMO, the right approach there would be to put the ad at the bottom and raise the footer/toolbar to offset for the bottom-pined ad.

So, I'd say, let's move with margin-bottom: 0 !important