Description

I've come across a strange issue where Bento components sporadically fail to render when they appear on some transformed AMP pages (i.e. SSR'ed with AMP Optimizer). I've put together a test case to demonstrate: https://amp-bento-component-ssr-init-fail.glitch.me/

See the following video for the buggy behavior in the third iframe with the heading “With WP Admin Bar w/ SSR”, after I reload the page a couple times:

This SSR'ed AMP with the WordPress admin bar consistently fails to have the amp-youtube and amp-video Bento components render.

Pass	Fail

The difference between the two is the i-amphtml-sizer element. In the working version, it has the slot="i-amphtml-svc" attribute whereas in the failing version, this slot attribute is absent.

The markup pre-SSR:

<p>
	<amp-youtube data-videoid="mGENRKrdoGY" layout="responsive" width="480" height="270"></amp-youtube>
</p>

<p>
	<amp-video controls width="640" height="360" layout="intrinsic" poster="https://playground.amp.dev/static/inline-examples/images/kitten-playing.png" src="https://playground.amp.dev/static/inline-examples/videos/kitten-playing.mp4"></amp-video>
</p>

The markup after SSR:

<p>
	<amp-youtube data-videoid="mGENRKrdoGY" layout="responsive" width="480" height="270" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
		<i-amphtml-sizer style="display:block;padding-top:56.25%"></i-amphtml-sizer>
	</amp-youtube>
</p>

<p>
	<amp-video controls width="640" height="360" layout="intrinsic" poster="https://playground.amp.dev/static/inline-examples/images/kitten-playing.png" src="https://playground.amp.dev/static/inline-examples/videos/kitten-playing.mp4" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic">
		<i-amphtml-sizer class="i-amphtml-sizer">
			<img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM2MCIgd2lkdGg9IjY0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=">
		</i-amphtml-sizer>
	</amp-video>
</p>

When the WordPress admin bar is present (in which case the SSR'ed Bento components often fail to render), the following changes are present:

1. Additional stylesheets are added.
2. Additional scripts are added.
3. Additional HTML elements are added.

There seems like a race condition going on, and it may be that the additional stylesheets and scripts are making the race condition more likely to happen.

Reproduction Steps

Go to https://amp-bento-component-ssr-init-fail.glitch.me/ (and potentially reload the page) to see the third iframe have Bento AMP components that fail to load.

I can reproduce consistently in Chrome, Edge, and Safari. In Firefox I've been able to reproduce the issue less frequently, mainly after doing hard refreshes.

Relevant Logs

No response

Browser(s) Affected

Chrome, Firefox, Safari, Edge

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

2107170150000