amp-story-player: close button not visible on iOS devices

MCFreddie777 commented 2 years ago

Description

When using story from URL.createObjectURL(), the close button is not visible on mobile devices

Reproduction Steps

1. Correct behaviour: When loading story from different html file, the close button is visible (both mobile and desktop).

// when players ready, add story from blob url
player.onPlayerReady = function () {
    player.add([
        {
            href:'story.html'
        }
    ]);
}

Code: https://github.com/MCFreddie777/MCFreddie777.github.io/tree/master/webstory/from-html-file Demo: https://mcfreddie777.github.io/webstory/from-html-file/ Screenshot:

2. However, when using story from `URL.createObjectURL()`, the close button is not visible on mobile devices.

// does not work. Problems with ObjectURL, close button is not visible
var storyTemplate = `<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>Joy of Pets</title> <link rel="canonical" href="pets.html"> <meta name="viewport" content="width=device-width"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"><\/script> <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"><\/script> <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"><\/script> <style amp-custom> ... </style></head><body><amp-story standalone title="Joy of Pets" publisher="AMP tutorials" publisher-logo-src="assets/AMP-Brand-White-Icon.svg" poster-portrait-src="assets/cover.jpg"> <amp-story-page id="cover"> <amp-story-grid-layer template="fill"> </amp-story-grid-layer> <amp-story-grid-layer template="vertical"> <h1>The Joy of Pets</h1> <p>By AMP Tutorials</p></amp-story-grid-layer> </amp-story-page> <amp-story-page id="page1"> <amp-story-grid-layer template="vertical"> <h1>Cats</h1> <q>Dogs come when they're called. Cats take a message and get back to you. --Mary Bly</q> </amp-story-grid-layer> </amp-story-page> ...</amp-story></body></html>`;

var contentUrl = URL.createObjectURL(new Blob([ storyTemplate ], { type: 'text/html' }));

// when players ready, add story from blob url
player.onPlayerReady = function () {
player.add([
    {
        href:contentUrl,
    }
]);
}

Code: https://github.com/MCFreddie777/MCFreddie777.github.io/blob/master/webstory/from-object-url/index.html Demo: https://mcfreddie777.github.io/webstory/from-object-url/ Screenshot:

Disclaimer: Testing on Safari, Chrome in iOS 15.0.

Relevant Logs

No response

Browser(s) Affected

Safari for iOS
Chrome for iOS

OS(s) Affected

iOS

Device(s) Affected

No response

AMP Version Affected

No response

newmuis commented 2 years ago

Interesting. This actually works as expected testing from Chrome 94.0.4606.97.

I'm not sure about this usage of insertAdjacentHtml, since this means the player will first be built (new AmpStoryPlayer(...)), then later have the controls configuration added, which the player does not currently observe changes to its children in the document. Seems like this could be a race condition in theory.

In general, I would recommend creating the player in HTML as specified in the documentation and showing it when the user has clicked the button; this will also potentially speed up the user interaction on click.

Can you try that to see if it works?

MCFreddie777 commented 2 years ago

Interesting. This actually works as expected testing from Chrome 94.0.4606.97.

Working in Chrome, Safari on macOS as well. Also, in Opera, Edge, Firefox and Chrome for Android 11. Seems like it is iOS only bug.

I'm not sure about this usage of insertAdjacentHtml, since this means the player will first be built (new AmpStoryPlayer(...)), then later have the controls configuration added, which the player does not currently observe changes to its children in the document. Seems like this could be a race condition in theory.

No, I already tried this, first inserting the json config, then creating instance of player, but with no success.

In general, I would recommend creating the player in HTML as specified in the documentation and showing it when the user has clicked the button; this will also potentially speed up the user interaction on click.

Can you try that to see if it works?

This works, but I'm sorry, this is not applicable to all usecase. I need to create the player dynamically, from JS.

stale[bot] commented 1 year ago

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.

ampproject / amphtml