Amphtml: amp-sticky-ad's amp-ad is not centered in the Google AMP viewer

[ehmorris]

What's the issue?

Within the Google AMP viewer, amp-sticky-ad's amp-ad child is not centered [screenshot].

Outside of the viewer, it is centered [screenshot].

I'd expect both instances to be centered.

How do we reproduce the issue?

1. Navigate to https://www.google.com/amp/s/ampbyexample.com/components/amp-sticky-ad/ on an iOS device (this reproduces on iOS 10 and 11.)
2. Navigate to https://ampbyexample.com/components/amp-sticky-ad/ on an iOS device.
3. Note that on the first url, the ad is not centered, but is on the second url.

I noticed one large difference: the iFrame which is a direct child of the amp-ad element has a width and height in the broken Google AMP viewer version, but not in the non-AMP-viewer version:

(left is Google AMP viewer, right is non-AMP-viewer)

The bodies of the ads within this iFrame are also significantly different.

What browsers are affected?

iOS 10 and 11 Safari.

Which AMP version is affected?

At least 1507083985898 (my current version) and up.

[zhouyx]

I am able to reproduce this. taking a look.

[ehmorris]

As a temporary fix, applying margin: auto to <amp-ad> fixes the centering issue in the inspector, and is AMP valid.

[zhouyx]

Thanks for filing this issue! We found the root cause for this bug. Already tracked internally, should be able to see the fix soon.

[ehmorris]

I can no longer reproduce the bug. Thanks!