ampproject / ampproject/amphtml
Moving to next page in web story is replaying first few frames of current page on slower devices
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
**Expected behavior:** Here is a web story https://alankent.github.io/extra-ordinary-amp-stories/vseries1/uep1/ . Each page has a video clip. When finished, you tap on right edge to proceed to next page and next video clip starts. You should see the video on each page one after the other (so it is like playing a video through the clips with pauses at page breaks).
**What is happening:** When proceeding to the next page, the video of the current page starts playing for a few frames before jumping over to the video on the next page. Recording the screen on my iPhone and stepping through it frame by frame shows multiple frames being displayed (so it is not just the poster image of the current page being displayed for example).
This feels bad as you see a flicker of incorrect content before the correct content is displayed.
**Environment:** I have tried on Chrome and Safari on Mac and my iPhone. It is hard to see on my mac (but can see it sometimes if watch carefully and do it a few times). It is easy to see on my iPhone with Safari - I assume because a slower device? I have not tried an Android phone or other browsers. I have seen it in Chrome and Safari on Mac at least once, but it is hard to repeat (and trust my eyes). It is much more noticeable and consistent on my iPhone X in Safari.
### Reproduction Steps
1. Open the following URL on an iPhone (I can repeat on other devices, but I have found it easiest to see on my iPhone) https://alankent.github.io/extra-ordinary-amp-stories/vseries1/uep1/
2. Wait for the video on a page to finish playing.
3. Tap the right edge to go to the next page, carefully watching the screen (a few frames from the video of the page being left are frequently shown, which feels jarring)
I can repeat on multiple pages in the story (so the dim overlay does not seem to be the issue).
### Relevant Logs
_No response_
### Browser(s) Affected
Chrome, Safari
### OS(s) Affected
iPhone, Mac
### Device(s) Affected
iPhone X, Macbook Pro
### AMP Version Affected
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.