Amphtml: amp-story-player fails to render story

Created on 21 Oct 2020 · 9Comments · Source: ampproject/amphtml

What's the issue?

The amp-story-player fails to render the story. The error mentioned is

error.js:207 Render timeout waiting for service amp-story-render to be ready.
of @ error.js:207
log.js:727 Uncaught Error: Render timeout waiting for service amp-story-render to be ready.
    at gb (log.js:710)
    at ab.f.createError (log.js:359)
    at timer-impl.js:142
    at timer-impl.js:83

How do we reproduce the issue?

Use the amp-story-player on a page. Here's an example.

What browsers are affected?

Confirmed failing in Chrome, Firefox and Safari.

Which AMP version is affected?

Latest player release.

Drop Everything Bug

Source

cpauwels

👍2

Most helpful comment

Verified fixed on https://www.industrialempathy.com/new-on-the-web/

Note, that the change is still rolling out through data centers around the world, and it'll take another roughly 40 minutes to complete. Right now it is still heavily flapping.

@Enriqe Please provide a full post-mortem. We need to ensure that there is proper automated and manual test coverage before the next release. CC @rsimha

cramforce on 21 Oct 2020

👍3

All 9 comments

@Enriqe

rnkimani on 21 Oct 2020

Taking a look

Enriqe on 21 Oct 2020

We're going to rollback the latest AMP prod release.

Enriqe on 21 Oct 2020

Rollback is in progress. Should be live soon.

Enriqe on 21 Oct 2020

@Enriqe still see an error
log.js:727 Uncaught Error: Render timeout waiting for service amp-story-render to be ready.
at gb (log.js:710)
at ab.f.createError (log.js:359)
at timer-impl.js:142
at timer-impl.js:83

yuliialunova on 21 Oct 2020

Verified fixed on https://www.industrialempathy.com/new-on-the-web/

Note, that the change is still rolling out through data centers around the world, and it'll take another roughly 40 minutes to complete. Right now it is still heavily flapping.

@Enriqe Please provide a full post-mortem. We need to ensure that there is proper automated and manual test coverage before the next release. CC @rsimha

cramforce on 21 Oct 2020

👍3

The fact that the story didn't render makes me think it might be a Story iframe position/size issue. A story height of 0px would produce this error. Given we've changed the DOM tree that could be what's causing the issue.

gmajoulet on 21 Oct 2020

The issue was caused by the introduction of an intermediate element in #30433.

Introducing a new element between the <amp-story-player> and the Shadow DOM was meant to fix the responsive behavior in the AMP version of the player. The problem was that I mistakenly added the styles for this intermediate element in our stylesheets for the shadow DOM, not for the light DOM. And because this element is not part of the shadow DOM, it wasn't getting any of the corresponding styles, including its height. By not having an explicit height, it was defaulting to 0, causing the story to not be displayed.

We didn't catch this during manual / QA testing because we were using documents without the <!DOCTYPE html> tag, which switches from quirks mode to standards mode. In standards mode, the html and body elements do not default to 100%, but in quirks mode they do. By testing in quirks mode, the intermediate element was actually getting 100% height, which was making it look like it worked properly.

I will update all of our samples to use the <!DOCTYPE html> tag. And I will also follow up with integration tests that test different layouts / sizes of the player.

Very sorry for the inconvenience that this may have caused.

Enriqe on 21 Oct 2020

Wow, good catch on that quirks mode issue!!

cramforce on 21 Oct 2020

Was this page helpful?

0 / 5 - 0 ratings