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

bdjang commented 2 years ago

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

stale[bot] commented 1 year ago

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.

ychsieh commented 10 months ago

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

ampproject / amphtml