Amphtml: <amp-carousel> is animating cards while user is scrolling in iOS 13 beta (Safari, Chrome & Firefox)
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
sirceljm-celtra
All 18 comments
The problem still exists in the iOS 13 - release version. In my opinion is this a serious UI - issue
itsmsc
on 23 Sep 2019
meistudioli
on 24 Sep 2019
I'm seeing the same symptoms
Occurs even when “autoplay” is not set in the amp-carousel
, can confirm this bug in iOS(+13)
tanakayuki
on 25 Sep 2019
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:
sparhami
on 25 Sep 2019
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!
itsmsc
on 25 Sep 2019
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)
joshcp
on 26 Sep 2019
A page with amp-carousel 0.2 does not see the same issue:
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.
itsmsc
on 26 Sep 2019
I can confirm that the same issue has been fixed by changing to amp-carousel 0.2
Thank you!!
tanakayuki
on 26 Sep 2019
Noticed this issue this morning with type="slides" and autoplay. This is a pretty big accessibility issue.
conwaydev
on 27 Sep 2019
Thanks @sparhami - will this fix go live Tuesday? Or, what's the timeline?
joshcp
on 27 Sep 2019
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.
sparhami
on 27 Sep 2019
@sparhami
I think this amp-carousel bug https://github.com/ampproject/amphtml/issues/24844 which is not been cured yet by https://github.com/ampproject/amphtml/pull/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 🙇🙇🙇
7110
on 7 Oct 2019
Confirmed! This bug is still existed with current amp-carousel version
ThongSaltire
on 10 Oct 2019
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.
sparhami
on 10 Oct 2019
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
acsant
on 15 Oct 2019
@acsant To keep the issues separate and easy to follow, please file a new bug for amp-carousel 0.2.
sparhami
on 15 Oct 2019
We have also faced the same scrolling issue in ios devices.
Aeakanshi
on 28 Sep 2020
For the Scroll function use this CSS code, it works
{
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
Aeakanshi
on 28 Sep 2020
Related issues
aghassemi
·
3Comments
edhollinghurst
·
3Comments
akshaylive
·
3Comments
cvializ
·
3Comments
sryze
·
3Comments
Most helpful comment
The problem still exists in the iOS 13 - release version. In my opinion is this a serious UI - issue