ampproject / ampproject/amphtml
Nested `amp-fit-text` content not displaying in `amp-carousel` [AMP for Email]
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### 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
1. Paste the AMP email code below into [AMP playground](https://playground.amp.dev/?mode=Responsive&runtime=amp4email#):
```html
body{visibility:hidden}
h1 {
margin: 1rem;
}
amp-fit-text rendering issue:
{{title}}
{{url}}
```
2. Click on the `amp-carousel` arrows and cycle through content; `amp-fit-text` content is not being displayed at all:

4. 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):
```html
```
However, it is assigned a class of `i-amphtml-fit-text-content` and being hidden:
```css
.i-amphtml-fit-text-content {
z-index: 2!important
visibility: hidden!important
}
```
5. Removing `visibility: hidden!important` will display the intended content but **without any font size adjustments**:

6. The text content in `amp-fit-text` will display properly if `amp-carousel` is removed completely from the original AMP email code:
```html
body{visibility:hidden}
h1 {
margin: 1rem;
}
amp-fit-text rendering issue:
{{title}}
{{url}}
```

HTML code for "AMP YouTube Channel" box:
```html
```
**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_
Contributor guide
Research direction
Reproduce the nested amp-fit-text, amp-list, amp-mustache, and amp-carousel case in the linked AMP Playground, then compare it with the example where amp-carousel is removed. Inspect why the generated content is hidden and whether font sizing runs in the carousel case. Done means the Mustache content is visible inside amp-carousel and still receives the intended font-size adjustment.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100