ampproject / ampproject/amphtml

[amp-next-page] v1.0 pages are not rendered if you don't scroll slowly

Open
#29,978 3 comments 1 reaction 0 assignees View on GitHub
Stale Type: Bug
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

## What's the issue?

1. When scrolling at a 'normal' pace, the amp-next-page component only shows the recommendations box & not the fully rendered articles

1. amp-next-page does not render all of the suggested 'next-articles'

## How do we reproduce the issue?

https://next-page-demo.glitch.me/

- Open the demo page & scroll to the bottom of the page - only the recommendation box is shown

![next-page-demo glitch me_(Moto G4)](https://user-images.githubusercontent.com/183972/91237195-4ef79c80-e77d-11ea-81aa-dff21b4d6009.png)

The same happens even if you wait for a few seconds before scrolling.

In order to get the articles to render, open the demo page and scroll very slowly to the bottom of the page. This will display 2 of the 3 articles & still have 1 in the recommendation box. The documentation says that the v1.0 component allows for infinite suggestions but it is stopping at 2.

![next-page-demo glitch me_(Moto G4) (1)](https://user-images.githubusercontent.com/183972/91237240-68004d80-e77d-11ea-9b4f-20892f3db1c4.png)

Also, the article in the recommendation box is actually listed first but displayed last.

```
[
{
"title": "First Article (AMP Next Page Demo)",
"image": "https://cdn.glitch.com/963d4e56-357b-4425-bdf6-ba13344782d6%2Fserver-uptime-9999.jpg?1554857102548",
"url": "https://next-page-demo.glitch.me/first-article.html"
},
{
"title": "Second Article (AMP Next Page Demo)",
"image": "https://cdn.glitch.com/963d4e56-357b-4425-bdf6-ba13344782d6%2Fmaking-small-talk-about-the-weather-18655.jpg?1554857106674",
"url": "https://next-page-demo.glitch.me/second-article.html"
},
{
"title": "Third Article (AMP Next Page Demo)",
"image": "https://cdn.glitch.com/963d4e56-357b-4425-bdf6-ba13344782d6%2FOprah-Email.png?1554858595682",
"url": "https://next-page-demo.glitch.me/third-article.html"
}
]
```

## What browsers are affected?

All browsers

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the behavior on https://next-page-demo.glitch.me/ with normal and slow scrolling, then trace the amp-next-page component's rendering and article-order behavior. Done means all three suggested articles render during normal scrolling, none remains only in the recommendation box, and the displayed order matches the supplied list.

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
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.