Search code examples
amp-htmlgoogle-amp

AMP injecting undesired styles `style="top: calc(0px);` when using <amp-social-share>


I'm trying to have a social share bar appear under the masthead/nav. Right now it's being obscured because of an inline style I don't control.

Here's what my wrapper div looks like on prod.

<div id="sharebar_801" class="sharebar-inline-desktop sharebar-wrapper sharebar-inline-mobile" i-amphtml-fixedid="F1" style="top: calc(0px);">

Weirdly on sandbox and on local, it does not have style="top: calc(0px);"

I can't override it with !important since that would break validation, why is that style there and what can I do to remove it?


Solution

  • The short answer is that this is being done to automatically adjust elements to correctly behave in the presents of a movable top bar in a viewer app.

    The 0px is supposed to be the actual computed value as defined by your styles (So, not always 0). If this does not work, there might be a bug in AMP. In that case, please file a bug with a small repro case on https://github.com/ampproject/amphtml/issues/new