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

swissspidy commented 3 years ago

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

Browser(s) Affected

No response

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

2108192119000

gmajoulet commented 3 years ago

That sounds pretty bad, we've seen a ton of errors in our logs starting from 09/03, originating from a Player that would show Stories in their prerender mode. That might probably be it.

cc @ampproject/wg-stories

pawelslabiak commented 3 years ago

@swissspidy, thank you for raising this issue. Because of this bug, we have taken down the web story carousel so the web page linked above no longer contains a live example of the bug.

processprocess commented 3 years ago

Because of this bug, we have taken down the web story carousel so the web page linked above no longer contains a live example of the bug.

Hi @pawelslabiak, I'm debugging this and am unable to reproduce the bug locally. Is it possible to host a page on that website with the carousel and post a link?

pawelslabiak commented 3 years ago

Hi @processprocess, thank you for looking into this. We've created a page with a stories block at cai2r.net/7079-2/ However, the observed behavior is now slightly different (perhaps as a result of updating Wordpress to version 5.8.1 and the Web Stories plugin to version 1.11.0).

On a desktop chromium-based browser, we observed the following:

When a story is opened for the first time, a black screen appears as before, and the story only appears after some user input, such as clicking the screen.
However, after the first such interaction, when a story is opened again, the same black overlay is shown for a very short time—less than a second—after which the story appears.
After a few opens the story launches as expected.

On a mobile chromium-based browser, we observed the following:

Stories open to a black screen on first open. Sometimes user interaction seems to be required to reveal the story, other times the story appears after about a second. It seems that once the story has been cached by the browser, it opens just as expected.

On a desktop safari browser:

On first open, stories open to a black overlay for less than one second before the first web story page appears. Subsequently, the stories open normally.

processprocess commented 3 years ago

Thanks for positing the demo page. Happy to hear that it's working after updating but it sounds like it's slow and at times still requires interaction.

I would like to try testing something else: Is it possible to add some empty blocks of content above the stories block so we scroll to it? We have some code related to scroll position so I want to see if that's part of the issue.

pawelslabiak commented 3 years ago

Absolutely—we appreciate your investigating this issue. The page now has a number of spacers at the top to make scrolling necessary to get to the stories block.

processprocess commented 3 years ago

It looks like both stories in the carousel are failing validation:

https://validator.ampproject.org/#url=https%3A%2F%2Fcai2r.net%2Fweb-stories%2Fai-can-reduce-overdiagnosis-in-ultrasound-screening-for-breast-cancer

https://validator.ampproject.org/#url=https%3A%2F%2Fcai2r.net%2Fweb-stories%2Fscientists-propose-new-standard-for-imaging-myelin

I'm not sure if this would effect the bug or not but it would be good to fix this and re-load the carousel to rule that out.

gmajoulet commented 3 years ago

Updating your Story with a valid one (cf @processprocess) seems to work for us.

If you copy/paste this snippet in the console, and click on the first card, it should load correctly.

$('amp-story-player').add([{'href':'https://www.washingtonpost.com/photography/interactive/2021/profound-memorial-shanksville/', title:'foo'}]);
$('.web-stories-list__story').setAttribute('data-story-url', 'https://www.washingtonpost.com/photography/interactive/2021/profound-memorial-shanksville/');

pawelslabiak commented 3 years ago

@processprocess, the black screen issue precedes the AMP validation problem, which is new and seems to arise from another plugin (Yoast SEO) generating an extraneous canonical tag for Web Stories. For the time being, we are filtering those out using the workaround suggested by Mike Zielonka in the relevant Github issue thread.

After implementing the filter, stories pass AMP validation but the open behavior remains unchanged.

gmajoulet commented 3 years ago

As per https://github.com/ampproject/amphtml/issues/35959#issuecomment-917163537, the issue seems to be content based. We're obviously here to help, but could you please help us and send us a codepen or anything we can edit, so we can debug faster and figure out what's wrong?

pawelslabiak commented 3 years ago

@gmajoulet would love to help further but not sure I understand what exactly you're requesting. Feel free to email me if having an aside offline would be easier.

swissspidy commented 2 years ago

@gmajoulet I put together a CodePen for you here: https://codepen.io/swissspidy/pen/eYRGoBN

Same issue happens there.

swissspidy commented 2 years ago

@processprocess @gmajoulet friendly ping :wave: have you had a chance to look at the CodePen?

processprocess commented 2 years ago

Thank you for following up @swissspidy and posting the codepen. I'm able to reproduce the bug with that and will look into this.

gmajoulet commented 2 years ago

Is this still a problem?

swissspidy commented 2 years ago

To my knowledge, yes.

The issue can still be reproduced with the above CodePen.

See how only the player's arrows are visible when opening the lightbox, but not the actual player contents:

Screenshot 2021-10-25 at 22 57 59

After an additional click, the player contents appears.

pawelslabiak commented 2 years ago

Yes @gmajoulet , as @swissspidy notes above, this continues to be an issue.