ampproject / ampproject/amphtml
amp-list: Support layout=container?
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Problem
In some email implementations, the embedding iframe is sized according to "documentHeight" viewer messages sent from the AMP doc.
This "documentHeight" can be highly variable while loading some AMP emails e.g. when an email is basically one big amp-list.
For example, the Docs comment emails use an amp-list with layout="fixed-height". This results in the following "documentHeight" changes:
1. documentHeight = amp-list[height]
2. documentHeight = height of amp-list's placeholder
3. documentHeight = height of amp-list's fetched/rendered contents
The latency between (1) and (2) results in a janky UX (caused by loading/execution of amp-list extension JS).
- There's no good way to choose a x-platform `height` value for `layout=fixed-height`.
- Other AMP layout types are not suitable.
- `layout=container` is what we want, but not allowed in amp-list.
### Proposal
`layout="container"` would allow the amp-list to size itself per its child placeholder content. The issue is that it can cause content jumping after fetch+render.
So instead of disallowing `layout="container"` from the get-go, perhaps we can be more precise -- at time of rendering, check if the new contents would cause an illegal size change.
1. Allow `layout=container` in amp-list.
2. After JSON fetch, measure the size of the amp-list and set `style="height: h, overflow: hidden"`. This temporarily makes the amp-list size static.
3. Render the fetched JSON to the child container.
4. Ask resources system to resize to fit the rendered contents (e.g. an amp-list near the bottom of the page is allowed to change size).
5. If resize is allowed, remove the `style` attribute.
6. If resize is not allowed, the amp-list's size remains frozen.
### Related
There's been recent effort to support more dynamic sizing in amp-list (e.g. `changeToLayoutContainer` action, `[is-layout-container]` binding) to avoid truncating children with dynamic sizes (e.g. amp-accordion/amp-ad). Also #25662.
This feature might remove the need for those and simplify amp-list's API by allowing layout=container from the start without a user gesture.
Contributor guide
Assessment
This issue has not been assessed yet.