amphtml Nested `amp-fit-text` content not displaying in `amp-carousel` [AMP for Email]

Description

Expected behavior: Display Mustache templates nested within amp-carousel. Font size of text content should be adjusted using amp-fit-text

Current behavior: Text content is not being rendered or displayed at all - just blank spaces are showing. amp-fit-text is running into display issues with amp-carousel in this specific use case.

Reproduction Steps

Paste the AMP email code below into AMP playground:

<!doctype html>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<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>
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<style amp-custom>
h1 {
margin: 1rem;
}
</style>
</head>
<body>
<h1>amp-fit-text rendering issue:</h1>
<amp-carousel width="600" height="500" layout="fixed" type="slides" role="region" aria-label="Basic carousel" autoplay>
<template type="amp-mustache" id="myTemplate">
<amp-fit-text width="140" height="40" layout="fixed" min-font-size="10" max-font-size="16" style="border: 5px solid red;">{{title}}</amp-fit-text>
<amp-fit-text width="140" height="40" layout="fixed" min-font-size="10" max-font-size="16" style="border: 5px solid blue;">{{url}}</amp-fit-text>
</template>
<amp-list width="100" height="200" layout="responsive" src="https://preview.amp.dev/static/inline-examples/data/amp-list-urls.json" template="myTemplate"></amp-list>
</amp-carousel>
</body>
</html>

Click on the amp-carousel arrows and cycle through content; amp-fit-text content is not being displayed at all:

Screen Shot 2022-05-30 at 3 45 18 PM

Use Chrome's Inspect Elements tool to reveal that the text content in the boxes is actually being rendered ("AMP YouTube Channel" in this case):

<amp-fit-text style="border: 5px solid red; width: 140px; height: 40px;" max-font-size="16" min-font-size="10" layout="fixed" height="40" width="140" i-amphtml-key="1" class="i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-built" i-amphtml-layout="fixed">
  <div class="i-amphtml-fill-content i-amphtml-fit-text-content">
    <div class="i-amphtml-fit-text-content-wrapper">AMP YouTube Channel</div>
  </div>
  <div class="i-amphtml-fit-text-measurer">AMP YouTube Channel</div>
</amp-fit-text>

However, it is assigned a class of i-amphtml-fit-text-content and being hidden:

.i-amphtml-fit-text-content {
  z-index: 2!important
  visibility: hidden!important
}

Removing visibility: hidden!important will display the intended content but without any font size adjustments:

Screen Shot 2022-05-30 at 3 45 59 PM

The text content in amp-fit-text will display properly if amp-carousel is removed completely from the original AMP email code:

<!doctype html>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<style amp-custom>
h1 {
margin: 1rem;
}
</style>
</head>
<body>
<h1>amp-fit-text rendering issue:</h1>

<template type="amp-mustache" id="myTemplate">
<amp-fit-text width="140" height="40" layout="fixed" min-font-size="10" max-font-size="16" style="border: 5px solid red;">{{title}}</amp-fit-text>
<amp-fit-text width="140" height="40" layout="fixed" min-font-size="10" max-font-size="16" style="border: 5px solid blue;">{{url}}</amp-fit-text>
</template>
<amp-list width="100" height="200" layout="responsive" src="https://preview.amp.dev/static/inline-examples/data/amp-list-urls.json" template="myTemplate"></amp-list>

</body>
</html>

Screen Shot 2022-05-30 at 4 32 12 PM

HTML code for "AMP YouTube Channel" box:

<amp-fit-text style="border: 5px solid red; width: 140px; height: 40px;" max-font-size="16" min-font-size="10" layout="fixed" height="40" width="140" i-amphtml-key="1" class="i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout" i-amphtml-layout="fixed">
  <div class="i-amphtml-fill-content i-amphtml-fit-text-content" style="visibility: visible !important;">
    <div class="i-amphtml-fit-text-content-wrapper" style="font-size: 16px;">AMP YouTube Channel</div>
  </div>
  <div class="i-amphtml-fit-text-measurer" style="font-size: 16px;">AMP YouTube Channel</div>
</amp-fit-text>

Conclusion: amp-fit-text is running into display issues when nested with amp-carousel in this specific use case.

Relevant Logs

No response

Browser(s) Affected

Chrome

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

No response

May 30 '22 20:05 bdjang

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

Aug 12 '23 04:08 stale[bot]

This also happens in normal AMP pages. Let's exclude the email condition for easier debugging.

Jan 22 '24 23:01 ychsieh