ampproject / ampproject/amphtml

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

Open
#38,248 3 comments 0 reactions 0 assignees View on GitHub
Component: amp-carousel P3: When Possible Stale Type: Bug WG: components
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:

![Screen Shot 2022-05-30 at 3 45 18 PM](https://user-images.githubusercontent.com/6575035/171052286-b5c02ae1-d6ac-4e54-a2da-4fdf20d8c1da.png)

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


AMP YouTube Channel


AMP YouTube Channel

```

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**:

![Screen Shot 2022-05-30 at 3 45 59 PM](https://user-images.githubusercontent.com/6575035/171053181-c3d4fe57-9414-4eb6-841f-c2cbbb13776e.png)

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}}

```

![Screen Shot 2022-05-30 at 4 32 12 PM](https://user-images.githubusercontent.com/6575035/171056443-d5c622d8-cbdd-4173-92b9-6f59f8c7fee9.png)

HTML code for "AMP YouTube Channel" box:

```html


AMP YouTube Channel


AMP YouTube Channel

```

**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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.