ampproject / ampproject/amphtml

Amp List infinite scroll freezes on IOS when inside a scrollable container

Open
#32,191 1 comment 0 reactions 0 assignees View on GitHub
Stale
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

## What's the issue?

Infinite scroll in amp list freezes on IOS devices (Chrome and Safari) when loading the next set of data. The amp-list must be in a scrollable container (either fixed or absolute positioning).

It appears the list loads the content, it then tries to measure the height by setting some inline styles on the child div. It then freezes and doesn't adjust the height until you scroll around a little. Usually it will eventually recover and adjust the height of the list, but it takes a while.

Works fine on non-ios devices.

## How do we reproduce the issue?

Simple reproducible example:
[simple example](https://bedbathbeyond.azureedge.net/7865/infinite-scroll-bug-report.html)

Issue displayed in video:
[video](https://drive.google.com/file/d/1PzH6Z4InpkNsGfgPYPld5GR3GMdXY6IM/view?usp=sharing)

1. Open above url in a IOS device (browser emulator does not work)
2. Click the open reviews button to open the scrollable container
3. Scroll the list down until it loads the next list.
4. If it loads the first time, scroll again until it loads the next list and so on until you see the problem (usually happens on the first load but occassionally it will work).

### Tips on Rendering Bugs

Make sure you are testing on an IOS device or something like Browserstack. It won't work in the chrome mobile emulator.

## What browsers are affected?

Chrome and Safari on IOS 14, 13, and 12. May also happen on older IOS versions but I did not test.

## Which AMP version is affected?

Version 2101212155000.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.