Amphtml: <amp-carousel> - scroll-snap-align: center is messing with the slide transition animations.

[SimonHogstromRonbol]

What's the issue?

In Chrome, when the autoplay or loop attribute is put on an amp-carousel the animation between slides "breaks" half way through, and just teleports to the slide you were transitioning through.

How do we reproduce the issue?

we've made this test site with different carousels, and noted when this animation error occurs.

https://test.oraswp.dk/ampcarousel.html

Go through the different examples and you can see that whenever either loop, autoplay or both is set, the animation breaks halfway through.

We've found out that this is all caused by the scroll-snap-align css property, which is being set on the individual slides that are animating back and forth.

try using this very illegal css rule in devtool, and you will see that the animation is now buttery smooth:
.i-amphtml-carousel-slide-item { scroll-snap-align: none!important; }

What browsers are affected?

This is definitely affecting Chrome

This is also a problem in Edge, but instead of breaking half-way through, the animation is just super fast with scroll-snap-align: center.

This is working perfectly in Firefox.

in Safari, there is no animation at all, but that seems unrelated to this particular scroll-snap-align issue.

Which AMP version is affected?

we've tested this in 2005220120000.

@morsssss

[SimonHogstromRonbol]

Has anyone had a chance to work on this issue yet?

We've implemented this on several sites for several clients, and we've had a ton of questions about "why is the animation wierd?" and "is this broken?" and we've been assuring our clients that it is being worked on with a P2 priority level "soon".

[morsssss]

thanks @micajuine-ho !

[SimonHogstromRonbol]

@micajuine-ho I really appriciate you picking this up, thank you!