ampproject / ampproject/amphtml
AMP runtime does not honor height constraints correctly for Responsive Layouts
- 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

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 -

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 -

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