Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[amp-story-player] Story not immediately loading in player, needs user interaction

See original GitHub issue

Description

I originally mentioned this at https://github.com/ampproject/amphtml/issues/34271#issuecomment-907008438, but I think it’s a separate issue altogether.

For the WordPress story editor we’ve been receiving some reports where stories being opened in a lightbox (using amp-story-player) are not immediately visible.

There’s some interesting behavior where the amp-story-player seems to load, but the story is not visible until some user interaction (i.e. press esc or click on the element).

Only after that interaction does the embedded story in the iframe have the i-amphtml-story-standalone classname.

From what I can see, that class name is added in the buildCallback of the amp-story component, so for some reason that is not being triggered initially:

https://github.com/ampproject/amphtml/blob/e1edbde829a6ffeaba986e5cc873359bd7322049/extensions/amp-story/1.0/amp-story.js#L518-L529

/cc @ampproject/wg-stories @Enriqe

Reproduction Steps

Visit https://cai2r.net/
Scroll down to where a story is embedded (there’s a poster image with the headline on top of it)
Click on the poster image to open the amp-story-player in the iframe
See black screen
Click on center of the screen or press a key or something
See how the story appears

Here’s a screenshot showing the missing i-amphtml-story-standalone classname at the beginning:

Screenshot 2021-09-06 at 11 49 56

Here’s a screencast showing the issue:

https://user-images.githubusercontent.com/841956/132198130-4bcb964e-0274-4f0c-9e08-5e2ed178b055.mov

Relevant Logs

Uncaught (in promise) Error: No messaging channel: initMessagingChannel timeout
    at ia (index.js:43)
    at tb.createError (log.js:295)
    at timer-impl.js:129
    at timer-impl.js:70