amp-base-carousel heights attribute is not rendered properly.

[milindmore22]

Bug Description

We got a support topic, from a theme developer who was working to implement amp-base-carousel and found out that the heights attribute is not properly rendered when used with the AMP plugin.

Sample Code to reproduce the issue.

<amp-base-carousel layout="responsive" width="1" height="1" heights="(min-width: 1199px) 23%,(min-width: 900px) 31.33%,(min-width: 600px) 48%, 100%" visible-count="(min-width: 1199px) 4,(min-width: 900px) 3,(min-width: 600px) 2, 1" auto-advance="true" auto-advance-interval="3000">
    <div>
      <img src="https://amp-support.rt.gw/wp-content/uploads/2008/06/img_8399.jpg" />
    </div>
    <div>
      <img src="https://amp-support.rt.gw/wp-content/uploads/2008/06/img_0767.jpg" />
    </div>
    <div>
      <img src="https://amp-support.rt.gw/wp-content/uploads/2008/06/img_0747.jpg" />
    </div>
    <div>
      <img src="https://amp-support.rt.gw/wp-content/uploads/2008/06/img_0513-1.jpg" />
    </div>
    <div>
      <img src="https://amp-support.rt.gw/wp-content/uploads/2008/06/windmill.jpg" />
    </div>
    <div>
      <img src="https://amp-support.rt.gw/wp-content/uploads/2008/06/michelle_049.jpg" />
    </div>
  </amp-base-carousel>

The non-AMP version renders correctly, but the AMP version has seen extra height. aligning the carousel on top and controls at the center of the carousel.

The above observation also occurs when the heights attribute is removed.

You can find more examples on the AMP Support test site. (let me know if you need access to it)

Expected Behaviour

The non-AMP and AMP version should have the same height.

Screenshots

non-AMP	AMP

PHP Version

7.4

Plugin Version

2.2.4

AMP plugin template mode

Transitional

WordPress Version

6

Site Health

No response

Gutenberg Version

not active

OS(s) Affected

No response

Browser(s) Affected

No response

Device(s) Affected

No response

Acceptance Criteria

No response

Implementation Brief

No response

QA Testing Instructions

No response

Demo

No response

Changelog Entry

No response

[westonruter]

@ediamin Is this the same as you reported in ampproject/amp-toolbox#1314 and ampproject/amp-toolbox-php#511?

[westonruter]

Or it could be ampproject/amp-toolbox#1304.

@milindmore22 If you turn off SSR does that fix the issue?

[milindmore22]

@westonruter Yes, If I turn off SSR it does fixes that issue

[ediamin]

Yes, I believe it's related to the inline padding-top property of the sizer element.

[milindmore22]

Recently merged PR by @ediamin fixed the issue, tested on dev