ampproject / ampproject/amphtml

AMP runtime does not honor height constraints correctly for Responsive Layouts

Open
#37,398 5 comments 0 reactions 0 assignees View on GitHub
P3: When Possible Stale Type: Bug WG: runtime
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

### Description

It seems the common AMP runtime is not honoring the height property for amp-list (when using amp-template and mustache) under following scenarios -

1. Inconsistent (breaks some times) height of the module displayed when the module is loaded. It seems the height is incorrect and leads to module getting cut sometimes (reproducible in the test code attached). It seems the moment I do any DOM event, like click Hide/Show it shows the complete module (including the monkey emoji) -

Sometimes using the code, if you go to http://127.0.0.1:5000/static/test.html

![image](https://user-images.githubusercontent.com/97769160/149601194-faca8f46-f743-4478-9161-69f7f4b2d999.png)

Note in the above module the emoji - see-no-evil-monkey does not shows up

But after a few refresh, the full module shows up with see-no-evil-monkey as the last image as shown below -

![image](https://user-images.githubusercontent.com/97769160/149601307-143aae68-4d10-4f84-8205-b8152441f5fd.png)

2. After the responsive layout has been zoomed back to original width, the height of the responsive module stays same and does not collapse back (also reproducible in the test code attached)

ie: After reducing the width of the chrome window to the minimum and expanding back to original size, there is a huge gap at the bottom of the module as show below -

![image](https://user-images.githubusercontent.com/97769160/149601415-06185bba-a1a0-4678-a0a1-13124d03f282.png)

### Reproduction Steps

Use the attached code, and follow the instructions in README.md (you would need Python 3.6 and flask as mentioned in README)

Extract the following zip - how_tall_am_i.zip

[how_tall_am_i.zip](https://github.com/ampproject/amphtml/files/7873912/how_tall_am_i.zip)

### Relevant Logs

```shell
Instructions in README.md (browser based testing)
```

### Browser(s) Affected

Chrome, Firefox, Safari

### OS(s) Affected

Mac

### Device(s) Affected

Mac

### AMP Version Affected

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with README.md in the attached how_tall_am_i.zip and run its browser-based reproduction using Python 3.6 and Flask. Observe amp-list with amp-template across initial loading and responsive resize, comparing the reported height and collapse behavior. Done means the module consistently displays all content and returns to the correct height after resizing.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.