Amphtml: [amp-carousel] Carousel (v2) skips slides if container has relative or decimal width

Created on 26 Nov 2019 · 2Comments · Source: ampproject/amphtml

Hello,
In the latest version (1911121900560), the carousel (v2) skips every second slide when using the back and forth buttons when layout=responsive is used and its wrapper has a relative width.

<!doctype html>
<html ⚡>
<head>
    <meta charset="utf-8">

    <!-- doesn't work -->
    <script async src="https://cdn.ampproject.org/rtv/001911121900560/v0.js"></script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/rtv/001911121900560/v0/amp-carousel-0.2.js"></script>

    <!-- works -->
<!--    <script async src="https://cdn.ampproject.org/rtv/001911070201440/v0.js"></script>-->
<!--    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/rtv/001911070201440/v0/amp-carousel-0.2.js"></script>-->

    <!-- any other relative value than 100% or non integer values, f.e. 235.5px, 80% or 60em -->
    <style amp-custom>
        .wrapper {
            width: 235.5px;
        }
    </style>

</head>

<body>
    <div class="wrapper">
        <amp-carousel width="360" height="240" layout="responsive" type="slides">
            <amp-img src="https://via.placeholder.com/360x240.png?text=1"
                     width="3"
                     height="2"
                     layout="responsive"
                     alt="1">
            </amp-img>
            <amp-img src="https://via.placeholder.com/360x240.png?text=2"
                     width="3"
                     height="2"
                     layout="responsive"
                     alt="2">
            </amp-img>
            <amp-img src="https://via.placeholder.com/360x240.png?text=3"
                     width="3"
                     height="2"
                     layout="responsive"
                     alt="3">
            </amp-img>
            <amp-img src="https://via.placeholder.com/360x240.png?text=4"
                     width="3"
                     height="2"
                     layout="responsive"
                     alt="4">
            </amp-img>
            <amp-img src="https://via.placeholder.com/360x240.png?text=5"
                     width="3"
                     height="2"
                     layout="responsive"
                     alt="5">
            </amp-img>
            <amp-img src="https://via.placeholder.com/360x240.png?text=6"
                     width="3"
                     height="2"
                     layout="responsive"
                     alt="6">
            </amp-img>
            <amp-img src="https://via.placeholder.com/360x240.png?text=7"
                     width="3"
                     height="2"
                     layout="responsive"
                     alt="7">
            </amp-img>
        </amp-carousel>
    </div>
</body>
</html>

Maybe that's a subpixel problem. Integer pixel values (e.g. 200px) seem to work. Version 1 of the carousel is not affected.

Thanks for your help!

//cc @dritter | @thecoconutdream | @dennisp93

amp-carousel High Priority Bug components

Source

uasd7

👍2

Most helpful comment

Thanks for the reproduction case, made it easy to verify the issue. Due to the release schedule and the upcoming holidays, it may be a while before this change gets in to production. It may make more sense to stick with 0.1 until the change fully lands, depending on how severe the issue is.

sparhami on 4 Dec 2019

🎉2

All 2 comments

This happens quite often on our page because we use a fluid wrapper. The Browser translates the percentual values almost every time to fractions. Is there an estimation when a fix will land on master for this issue?
We are thinking about pinning the amp version to the previous one, because of this..