Amphtml: AMP ad is not visible until switching tabs back and forth

[jyn15]

What's the issue?

inabox AMP content is invisible initially and becomes visible after I switch tabs back and forth several times.

How do we reproduce the issue?

I am not able to provide a reduced test case. I uploaded an AMPHTML ad in Goolge Ads under a Display Campaign, and tried to preview the ad. The ad is rendered with AMP inabox.

Sometimes (not every time) when the ad did not show, I got this error in the console:
[inabox-host] Missing message.source. message.data="amp-011909241711100{\"type\":\"send-positions\",\"sentinel\":\"5539602468081875\"}"
B @ cdn.ampproject.org/rtv/011909241711100/amp4ads-host-v0.js:6

What browsers are affected?

Chrome 77.0.3865.90

Which AMP version is affected?

1909241711100

[jyn15]

@calebcordry @lannka

[lannka]

I'm able to trigger the bug with a setting that:

• load the ad iframe (with amp-carousel) in an invisible div
• turn the div to visible after an user event (e.g. button click)

amp-carousel will not layout in this case until a scroll or tab switch.

[lannka]

BTW, the following error message you pasted is irrelevant to this issue.

[inabox-host] Missing message.source. message.data="amp-011909241711100{"type":"send-positions","sentinel":"5539602468081875"}"

I created a PR to change error to warn to not confuse people: #24977

[lannka]

Possible fixes:

A) Address the TODO:
https://github.com/ampproject/amphtml/blob/b3214bb58b8b56e8c88cf854e883e593a910561e/ads/inabox/position-observer.js#L55-L62

B) Let inabox runtime eagerly layout all elements even if they are invisible.

Option A) will need MutationObserver, which will bring extra computation cost.
Option B) hands over loading strategy completely to the parent page. all ad resources will load immediately once iframe start to render. (this is actually how the iframe loading attribute behaves in Chrome right now). It will certainly waste more network bandwidth for widgets like amp-carousel if user will never swipe to the next slide.

@dvoytenko @jridgewell suggestions?

[jridgewell]

What controls the inabox becoming visible? Generally, if you start AMP in prerender mode, transitioning to visible mode is enough. Is inabox not doing this, or doing it some other way?