Bento components sporadically fail to render on Transformed (SSR'ed) AMP pages

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:

https://user-images.githubusercontent.com/134745/127750999-e6e938e6-5d79-45a0-9d39-ad5be5c65960.mov

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

[jridgewell]

What’s the trade off in making client side apply changes for invalid server output?

2 lines of code, it’s extremely simple. Because of backreferences in compress, it might be 20 bytes. It might cause some CLS, but the failure mode is display nothing at all which I think is worse.

Perhaps I am reading this incorrectly, but if the server was rendering as expected this issue wouldn’t occur… correct?

Correct.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.