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

[swissspidy]

Description

I originally mentioned this at #34271 (comment), 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:

amphtml/extensions/amp-story/1.0/amp-story.js

Lines 518 to 529 in e1edbde

	/**
	* Note: runs in the buildCallback vsync mutate context.
	* @private
	*/
	initializeStandaloneStory_() {
	const html = this.win.document.documentElement;
	html.classList.add('i-amphtml-story-standalone');
	// Lock body to prevent overflow.
	this.lockBody_();
	// Standalone CSS affects sizing of the entire page.
	this.onResize();
	}

/cc @ampproject/wg-stories @Enriqe

Reproduction Steps

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

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

Here's a screencast showing the issue:

Screen.Recording.2021-09-06.at.11.50.27.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]

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]

@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]

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]

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]

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]

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]

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]

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]

@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]

As per #35959 (comment), 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]

@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]

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

Same issue happens there.

[swissspidy]

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

[processprocess]

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]

Is this still a problem?

[swissspidy]

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:

After an additional click, the player contents appears.

[pawelslabiak]

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

[mxbclang]

@gmajoulet Checking in here as we continue to get reports of this issue on the Web Stories forum.

[DanielCryptoK]

I am still getting this error, please can someone let me know when it will be fixed or if there is anything I can do to fix it my end as been many months this problem has been effecting my website for now.

[pawelslabiak]

This buggy behavior also continues on our website.

[DanielCryptoK]

Is this problem every going to be fixed as reported way back in April and no one seems to be working on fixing it.

[DanielCryptoK]

It is ONE YEAR since this error was reported. Can someone please let me know if it is going to be fixed?

[processprocess]

Thank you for following up.
This demo of a player in a lightbox appears to be working as intended.

Since it's been a while, can you post an example so we can repro?

[DanielCryptoK]

Hi

Yes no problem see video of it not working. It has never worked for me.

https://www.awesomescreenshot.com/video/10928529?key=1726e40417be7d0be880a6863c464e33

You can test for yourself by visiting https://bitcoin-casino-no-deposit-bonus.com/

[coreymasanto]

So, the open question is: why does initializing the viewer messaging handshake (sometimes) fail?

I believe that the handshake request is sent from the story to the amp-story-player here and the handshake response is then supposed to be sent from the amp-story-player to the story here. In my opinion, the most likely possibilities are that the amp-story-player is either 1) never receiving the request and thus incapable of returning a response, or 2) mishandling the request in such a way that the 'channelOpen' handshake response is not being sent to the story. I'll set up breakpoints and try to repro so that we can figure out which scenario is occurring.

[gmajoulet]

Hello,
These are very hard to debug as you're using custom CSS to embed our code.

The fact that the handshake request is never sent makes me think that the elements never built. This could very likely be because the elements have no size, we have an optimization that says that if the content is hidden, we don't build it.

You're wrapping our player inside some divs with these classes web-stories-list__lightbox-wrapper ws-lightbox-1 but also web-stories-list__lightbox. They have display: none which completely hides the content and override the CSS we distribute.
Please give a size to your lightbox and don't hide it (display: none), I believe that'll fix it.

[DanielCryptoK]

Hi gmajoulet,

Many thanks for looking into this for me.

I did not realize there was any custom css which I have now found and removed the below

.web-stories-embed:not(.web-stories-embed-amp) .wp-block-embed__wrapper {
max-width: none;
}

.alignnone {
margin: 1.5em auto;
padding: 0 30px;
}

.web-stories-embed .wp-block-embed__wrapper {
margin-left: auto;
margin-right: auto;
}

However the problem is not fixed and still requires two clicks to open a web story.

[gmajoulet]

Can you link to the updated website please? I've seen a few display: none; statements etc, I can help look into what else needs to be removed.

[DanielCryptoK]

The live version is the updated version with the custom web stories code removed. https://bitcoin-casino-no-deposit-bonus.com/

Would you like me to post all of custom code for CSS/JS here, maybe problem there?

Also not one person has been able to answer my ticket as to why certain videos are not been indexed by google. It is greatly damaging my site so if you have any ideas why this is the case it would be much apricated as no one in the google community can answer it. https://support.google.com/webmasters/thread/177831693?hl=en

[gmajoulet]

You have a display: none on .web-stories-list__lightbox that hides the amp-story-player. The player is positioned away from the screen so I don't think you need this display none.

You can test your code by running this in the console, and making sure that width and height are NOT 0.
$('amp-story-player').getBoundingClientRect()

[DanielCryptoK]

Wow that is so over my head as I no idea how to do that. Are you able to tell me exactly where I would find the code that needs to be changed in wordpress as I can not find any of these web stories lightbox settings???

[swissspidy]

@gmajoulet For context, that CSS is coming from the Web Stories WordPress plugin. Are you saying the player can‘t properly load when it‘s hidden like this? Should calling the player‘s load() method fix this?

[swissspidy]

@gmajoulet could you perhaps point me to that optimization you mentioned? I fail to reproduce this locally with similar CSS.

@DanielCryptoK Try adding this to your "Additional CSS" section in the WordPress customizer:

.web-stories-list__lightbox { display: block !important; }

[DanielCryptoK]

The code worked but there is a hidden menu at the top. See image of what I mean here https://www.webpagescreenshot.info/#v2=r78urBJUv

[swissspidy]

This is because of something on your website removing the CSS from https://cdn.ampproject.org/amp-story-player-v0.css. Either try disabling all other plugins to find the culprit or add this to "Additional CSS" as a workaround:

amp-story-player.i-amphtml-story-player-loaded a { display:none !important; }

[DanielCryptoK]

Could it be the below error that is caused by my super progressive apps plugin which the developer knows about and has been trying to fix for the last two months.

superpwa-sw.js:9 Uncaught (in promise) TypeError: Failed to execute 'put' on 'Cache': Partial response (status code 206) is unsupported
at superpwa-sw.js:9:178

[swissspidy]

That looks unrelated

[newmuis]

I'll also note that in this specific case, it looks like the css is being served from https://bitcoin-casino-no-deposit-bonus.com/wp-content/cache/min/1/amp-story-player-v0.js?ver=1663611239 which looks like it (a) is caching the css, and (b) is changing/minifying the css, both of which are potentially problematic.

I can't actually determine whether that is affecting things in this scenario, but also the repro case above at https://cai2r.net/7079-2/ seems more minimal, as it is loading the scripts/styles as expected.

Ideally we would find a way to construct a truly minimal reproducible example for this issue to be actionable.

[DanielCryptoK]

Would excluding web stories from the CSS option in WP rocket solve this issue? See image https://www.webpagescreenshot.info/#v2=pz4opMOAB

[swissspidy]

@DanielCryptoK Maybe, but you would need to exclude https://cdn.ampproject.org/ there. But if that does not help, please ask about it in the Web Stories WordPress plugin forums, in order to not further derail the discussion here.

[DanielCryptoK]

Ok, just so you know excluding the web stories plugin from the WP rocket CSS settings fixed the Super progressive web app error which was a nice surprise.

[gmajoulet]

Glad we solved this :))
Thanks all!

[newmuis]

It's not clear to me: did this resolve the original issue? Or just the unrelated JavaScript error?

[pawelslabiak]

@newmuis, the original issue appears not have been solved.

@swissspidy @gmajoulet et al.,
The problem with web stories launching continues. For reference, see the test page we set up earlier at the request of @processprocess: https://cai2r.net/7079-2/ (scroll down for the web stories).

Really appreciate everyone's attention to this issue.

[gmajoulet]

Who owns the web-stories-list__lightbox CSS? The issue should be filed against this team so they fix their CSS, removing the display: none; and ensuring the amp-story-player has a size.

[newmuis]

I think that is from https://github.com/GoogleForCreators/web-stories-wp. @swissspidy can you confirm?

[swissspidy]

Heya, yes as mentioned earlier that is coming from the Web Stories WordPress plugin!
Guess that was a bit lost in the discussion :-)

Ultimately, Gabriel's suggestion with regards to display: none is what we've needed here to finally be able to resolve this issue. So thanks for that!

We should be able to resolve this in the Web Stories WordPress plugin very soon.

@pawelslabiak Once we've done so, it will also resolve the issue for you.

[swissspidy]

@pawelslabiak Just to follow up, I briefly tested this on your site with dev tools and the fix should work there as well.

If you don't wanna wait for a plugin update, try adding this to your "Additional CSS" section in the WordPress customizer:

.web-stories-list__lightbox { display: block !important; }

[pawelslabiak]

@swissspidy, thank you for following up on this—adding the line you've suggested to the CSS customizer appears to have solved the buggy loading behavior. 🎉

I thought I tested this line of CSS on Sept. 20 and observed no change in the web-story loading behavior. However, on the second go-around today I've realized that I mistakenly tested another CSS line from a recent comment in this thread. Apologies for not being more thorough there—could've probably saved @swissspidy an extra step.

Thank you, @swissspidy, @newmuis, @gmajoulet, @coreymasanto, @processprocess for the time you've dedicated to solving this issue. 👏
Thanks also to @DanielCryptoK for lobbying recently for renewed attention to the bug. 🙌

Looking forward to the fix via plugin update, and to working with web stories again. 🥳

[newmuis]

We did it, y'all! 🎉 💪

Thanks for the persistence everyone!

[pawelslabiak]

P.S. Does anyone still find the test page at https://cai2r.net/7079-2/ helpful or can we take it down?

[swissspidy]

I think you can remove that one