ampproject / ampproject/amphtml
amp-story-player: close button not visible on iOS devices
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### 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).
```javascript
// 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](https://github.com/MCFreddie777/MCFreddie777.github.io/tree/master/webstory/from-html-file)
**Demo:** [https://mcfreddie777.github.io/webstory/from-html-file/](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.
```javascript
// does not work. Problems with ObjectURL, close button is not visible
var storyTemplate = ` Joy of Pets 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}}body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none} <\/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](https://github.com/MCFreddie777/MCFreddie777.github.io/blob/master/webstory/from-object-url/index.html)
**Demo:** [https://mcfreddie777.github.io/webstory/from-object-url/](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_
Contributor guide
Research direction
Start by reproducing the two linked amp-story-player demos on iOS Safari or Chrome, comparing the external story.html case with the URL.createObjectURL() case. Trace how amp-story-player loads the blob URL and renders the close button; done means the button is visible on affected iOS devices for both loading methods.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100