ampproject / ampproject/amphtml

amp-carousel-0.2 changes slide on tab change / resize in amp-list

Open
#33,476 6 comments 0 reactions 1 assignee Claimed by @caroqliu 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?

If the amp carousel component is used inside an amp-list it often occurs that the initial slide displayed is the last slide instead of the first slide. On mobile safari the issue can be triggered by switching to a different tab and returning to the tab with the amp-list & amp-carousel combination. On other browsers, e.g desktop chrome, the issue occurs when changing the window size and slides formerly out of viewport become visible.

## How do we reproduce the issue?

Safari Mobile

1. open https://www.cu-camper.com/en/results/?phrase1=Kanada&phrase2=Kanada&date1=25.11.2021&date2=04.12.2021&adults=2&children=0
2. Wait for results to show up
3. *IS*: list of vehicle attributes is visible, *SHOULD:* show vehicle image (first slide)

In case the images are shown initially:
1. Scroll down
2. Switch tabs
3. Open tab with result list again
4. *IS*: list of vehicle attributes is visible, *SHOULD:* show vehicle image (first slide)

Chrome desktop

1. open with small viewport https://www.cu-camper.com/en/results/?phrase1=Kanada&phrase2=Kanada&date1=25.11.2021&date2=04.12.2021&adults=2&children=0
2. Quickly change page dimension, e.g. close inspect window
3. *IS*: list of vehicle attributes is visible, *SHOULD:* show vehicle image (first slide)

## What browsers are affected?

Safari mobile 14, Chrome desktop Version 89.0.4389.90

## Which AMP version is affected?

AMP ⚡ HTML – Version 2103122145004

https://user-images.githubusercontent.com/12771905/112468626-ca97e700-8d68-11eb-8cbf-506d4067ea6c.mov
@sebastianbenz I have also attached a video of the problem.

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.