amp-google-doc-embed fails to display multiple documents

Description

This page is valid: https://afdsi.com/__amp-issues/_google-doc-embed/

It uses amp-google-doc-embed to feature PDFs, Google Sheets, and Word (docx) files.

However, only the first instance of amp-google-doc-embed works.

All document types work, but only when assigned to the first tab.

Are we doing something wrong, or can only one instance of amp-google-doc-embed be displayed on a page?

Reproduction Steps

https://afdsi.com/__amp-issues/_google-doc-embed/

Browser(s) Affected

Chrome, Firefox

[jridgewell]

First, we have a requirement that things that are display: none do not cause a layout. This is easiest to understand when discussing Ads: if an ad cannot be seen, we cannot make a network request to fill the ad slot. This is both a resource win (less network/CPU usage), and a privacy win.

So, when doing initial detection on the document, we record whether an element is displayable. Ideally, when an element becomes displayed, we want to trigger layout. But it’s extremely difficult to detect changes in display: none, because there’s no Observer in JS that will tell us when computed styles change.

We do have a MutationObserver that listens to changes to the hidden attribute, which is our approved way to handle this. We can cause mutations of hidden via amp-bind, or an on="tap:el.hide handler on the checkboxes.

[samouri]

I was able to get this example working by adding on=tap:sectionN.show to each of the <input> elements. See here.

<input id="tab1" type="radio" name="tabs" on="tap:content1.show" checked>
<input id="tab2" type="radio" name="tabs" on="tap:content2.show">
<input id="tab3" type="radio" name="tabs" on="tap:content3.show">
<input id="tab4" type="radio" name="tabs" on="tap:content4.show">
<input id="tab5" type="radio" name="tabs" on="tap:content5.show">

The .show action is a workaround to force the Runtime to remeasure the element and trigger a layout if required.