<amp-carousel> is animating cards while user is scrolling in iOS 13 beta (Safari, Chrome & Firefox) #24541

sirceljm-celtra · 2019-09-16T07:53:30Z

What's the issue?

If user is scrolling on the AMP page which includes an <amp-carousel>, then the carousel will switch between cards while scrolling.

If "autoplay" is set on the carousel then the carousel will be animating indefinitely while scrolling. If "autoplay" is not set, then the carousel will animate back to the first card and stay there.

How do we reproduce the issue?

Open the following AMP page in any browser in iOS13 beta on an iPhone or iPad.

<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
  <title>amp-carousel</title>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <link rel="canonical" href="https://amp.dev/documentation/examples/components/amp-carousel/index.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
</head>
<body>
  <amp-carousel width="400" height="300" layout="responsive" type="slides" autoplay delay="2000">
    <amp-img src="https://playground.amp.dev/static/samples/img/image1.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
    <amp-img src="https://playground.amp.dev/static/samples/img/image2.jpg" width="400" height="300" layout="responsive" alt="another sample image"></amp-img>
    <amp-img src="https://playground.amp.dev/static/samples/img/image3.jpg" width="400" height="300" layout="responsive" alt="and another sample image"></amp-img>
  </amp-carousel>
</body></html>

When scrolling the page the carousel will animate between cards very fast.

What browsers are affected?

All browsers on iOS13 beta

Which AMP version is affected?

Latest

The text was updated successfully, but these errors were encountered:

itsmsc · 2019-09-23T11:43:58Z

The problem still exists in the iOS 13 - release version. In my opinion is this a serious UI - issue

meistudioli · 2019-09-24T13:34:02Z

I have some problem too.

demo: https://blog.lalacube.com/mei/yahoo_mall_fp_amp.php

tanakayuki · 2019-09-25T02:54:00Z

I'm seeing the same symptoms
Occurs even when “autoplay” is not set in the amp-carousel
, can confirm this bug in iOS(+13)

sparhami · 2019-09-25T17:04:17Z

I created a demo page to reproduce the issue with amp-carousel 0.1:

https://output.jsbin.com/qujeqah/1

Swiping to the second or third slide, then swiping down causes the carousel to go back to the first slide. A page with amp-carousel 0.2 does not see the same issue:

https://output.jsbin.com/hudalit/1

itsmsc · 2019-09-25T18:24:53Z

You can see the problem on one of our pages: https://www.mdr.de/tv/index~amp.html
Both problems, described on the first entry; If "autoplay" is set on the carousel then the carousel will be animating indefinitely while scrolling. If "autoplay" is not set, then the carousel will animate back to the first card and stay there.
Please fix this contemporary!

joshcp · 2019-09-25T23:33:51Z

Two additional examples:

https://amp.pga.com/events/pgachampionship/2019 (Carousel is near top of page)
https://amp.zales.com/ (Carousel is near bottom of page)

itsmsc · 2019-09-26T08:52:19Z

A page with amp-carousel 0.2 does not see the same issue:

https://output.jsbin.com/hudalit/1

I can confirm that amp-carousel 0.2 does not see the same issue. I have migrate all pages to v 0.2 with some CSS - changes. This works for me. Thank you.

tanakayuki · 2019-09-26T09:07:38Z

I can confirm that the same issue has been fixed by changing to amp-carousel 0.2

Thank you!!

conwaydev · 2019-09-27T15:44:21Z

Noticed this issue this morning with type="slides" and autoplay. This is a pretty big accessibility issue.

joshcp · 2019-09-27T17:36:02Z

Thanks @sparhami - will this fix go live Tuesday? Or, what's the timeline?

sparhami · 2019-09-27T18:05:20Z

Thanks @sparhami - will this fix go live Tuesday? Or, what's the timeline?

The normal release process would be that this will be in the next canary on Tuesday, which will go live one week after that. I will look into cherry-picking this into production however, since this does seem like it causes quite a few problems. Hopefully that can be done today or Monday.

7110 · 2019-10-07T13:58:33Z

@sparhami
I think this amp-carousel bug #24844 which is not been cured yet by #24771 .
amp-carousel will go next even when scrolling in the ~~X-axis~~ Y-axis direction.

http://hml.vivo4g.clientes.ananke.com.br/videos/erro-carousel-iphone2.webm

iOS 13.1.2 Safari (iPhone7, iPhoneX, etc...)
(used dist/v0/amp-carousel-0.1.js which pulled the latest master branch and generated by gulp dist)

Please check this bug 🙇🙇🙇

ThongSaltire · 2019-10-10T21:04:50Z

Confirmed! This bug is still existed with current amp-carousel version

sparhami · 2019-10-10T21:24:04Z

While the bug has been fixed in the code, it is not live yet. The fix will hopefully be present in the next canary version. The releases Slack channel is updated whenever a new canary is cut and when a canary is promoted to production.

acsant · 2019-10-15T17:56:39Z

Should this issue be re-opened? I'm still noticing this bug, but only when scroll after swiping out of the full screen in the new carousel v0.2

sparhami · 2019-10-15T18:00:18Z

@acsant To keep the issues separate and easy to follow, please file a new bug for amp-carousel 0.2.

Aeakanshi · 2020-09-28T13:53:19Z

We have also faced the same scrolling issue in ios devices.

Aeakanshi · 2020-09-28T14:47:44Z

For the Scroll function use this CSS code, it works

{
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

sirceljm-celtra added the Type: Bug label Sep 16, 2019

dreamofabear added the WG: components label Sep 16, 2019

kristoferbaxter assigned sparhami Sep 25, 2019

sparhami mentioned this issue Sep 26, 2019

🐛Fix non-carousel scrolling on iOS 13 reverting to first slide. #24771

Merged

sparhami closed this as completed in #24771 Sep 27, 2019

sparhami mentioned this issue Oct 2, 2019

Bug in amp-carousel #24844

Closed

acsant mentioned this issue Oct 16, 2019

amp-carousel v0.2 switches between cards after swiped out of the fullscreen #25077

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

<amp-carousel> is animating cards while user is scrolling in iOS 13 beta (Safari, Chrome & Firefox) #24541

<amp-carousel> is animating cards while user is scrolling in iOS 13 beta (Safari, Chrome & Firefox) #24541

sirceljm-celtra commented Sep 16, 2019 •

edited

Loading

itsmsc commented Sep 23, 2019

meistudioli commented Sep 24, 2019

tanakayuki commented Sep 25, 2019

sparhami commented Sep 25, 2019

itsmsc commented Sep 25, 2019

joshcp commented Sep 25, 2019

itsmsc commented Sep 26, 2019

tanakayuki commented Sep 26, 2019 •

edited

Loading

conwaydev commented Sep 27, 2019 •

edited

Loading

joshcp commented Sep 27, 2019

sparhami commented Sep 27, 2019

7110 commented Oct 7, 2019 •

edited

Loading

ThongSaltire commented Oct 10, 2019

sparhami commented Oct 10, 2019

acsant commented Oct 15, 2019 •

edited

Loading

sparhami commented Oct 15, 2019

Aeakanshi commented Sep 28, 2020

Aeakanshi commented Sep 28, 2020

<amp-carousel> is animating cards while user is scrolling in iOS 13 beta (Safari, Chrome & Firefox) #24541

<amp-carousel> is animating cards while user is scrolling in iOS 13 beta (Safari, Chrome & Firefox) #24541

Comments

sirceljm-celtra commented Sep 16, 2019 • edited Loading

What's the issue?

How do we reproduce the issue?

What browsers are affected?

Which AMP version is affected?

itsmsc commented Sep 23, 2019

meistudioli commented Sep 24, 2019

tanakayuki commented Sep 25, 2019

sparhami commented Sep 25, 2019

itsmsc commented Sep 25, 2019

joshcp commented Sep 25, 2019

itsmsc commented Sep 26, 2019

tanakayuki commented Sep 26, 2019 • edited Loading

conwaydev commented Sep 27, 2019 • edited Loading

joshcp commented Sep 27, 2019

sparhami commented Sep 27, 2019

7110 commented Oct 7, 2019 • edited Loading

ThongSaltire commented Oct 10, 2019

sparhami commented Oct 10, 2019

acsant commented Oct 15, 2019 • edited Loading

sparhami commented Oct 15, 2019

Aeakanshi commented Sep 28, 2020

Aeakanshi commented Sep 28, 2020

sirceljm-celtra commented Sep 16, 2019 •

edited

Loading

tanakayuki commented Sep 26, 2019 •

edited

Loading

conwaydev commented Sep 27, 2019 •

edited

Loading

7110 commented Oct 7, 2019 •

edited

Loading

acsant commented Oct 15, 2019 •

edited

Loading