elements inside amp-carousel are randomly jumping out of of

[davidwebtales]

Description

I've found that while using an , randomly there is a unexpected behaviour where the content that should be inside the "i-amphtml-carousel-scroll", stays as a direct child of and breaks the carousel behaviour.

Expected Behaviour:

<amp-carousel>
    <div class="i-amphtml-carousel-content">
        <div class="i-amphtml-carousel-scroll">
            ... My items here...
        </div>
        <div class="i-amphtml-carousel-arrows">
        </div>
    </div>
</amp-carousel>

What is happening:

<amp-carousel>
    <div class="i-amphtml-carousel-content">
        <div class="i-amphtml-carousel-scroll">
        </div>
        <div class="i-amphtml-carousel-arrows">
        </div>
    </div>
    ... My items here...
</amp-carousel>

When it breaks(left), vs expected behaviour(right)

Comparison from the html structure when it breaks vs expected:

Reproduction Steps

The issue about replicating this, is that so far the behaviour seems completly random, so it may need a lot of trial and error:

1. Go to https://www.ucpa.com/
2. Notice the carousel
3. Refresh until it breaks

There are other carousels along the website that are breaking. Again with varying frequency.
Sorry If I can't provide more specific reproduction steps, but I haven't found a way to isolate the issue. Other pages, staging vs production, whatever it is there is not a way to consistently break it. The best I have found is that having "Disable cache" in the network tab seems to mitigate the issue, making it more rare, but still happens.

Relevant Logs

This error is not producing any console logs

Browser(s) Affected

Chrome

OS(s) Affected

MacOS

Device(s) Affected

Macbook pro m1

AMP Version Affected

2401262004000