ampproject / ampproject/amp-toolbox
Inconsistency in placement of overflow button when SSR prepends sizer element
- Dominant language
- HTML
- Stars
- 459
- Forks
- 242
- PR merge metrics
- No merged PRs in 30d
Description
In https://github.com/ampproject/amp-wp/pull/5926 I noticed that the `button[overflow]` element was being hidden due to being positioned outside of the parent element:

On non-SSR'ed pages, the preview button appeared at the _top_ inside of the element.
The issue is that on SSR'ed pages, a responsive `amp-iframe` will get:
```html
See more
https://ifpaintingscouldtext.tumblr.com/post/92003045635/grant-wood-american-gothic-1930
```
Whereas on the non-SSR'ed page, this is absent:
```html
See more
https://ifpaintingscouldtext.tumblr.com/post/92003045635/grant-wood-american-gothic-1930
```
The `i-amphtml-sizer` is pushing the computed `top` for the `button` to be the same as the `height` of the sizer, which causes it to move out of view.
We worked around the issue by adding this style rule to consistently place the absolutely-positioned button at the bottom of the container:
```css
button[overflow] {
bottom: 0;
}
```
Nevertheless, I think SSR should consider _appending_ the `i-amphtml-sizer` element rather than _prepending_ in order to ensure consistency when SSR'ed.
Playground examples:
[Without SSR](https://playground.amp.dev/?mode=Pixel+2#share=PCFET0NUWVBFIGh0bWw+CjxodG1sIOKaoT4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8+CiAgPHRpdGxlPlJlc2l6YWJsZSBJZnJhbWUgdy9vIFNTUjwvdGl0bGU+CiAgPGxpbmsgcmVsPSJjYW5vbmljYWwiIGhyZWY9InNlbGYuaHRtbCIgLz4KICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoIiAvPgogIDxzdHlsZSBhbXAtYm9pbGVycGxhdGU+Ym9keXstd2Via2l0LWFuaW1hdGlvbjotYW1wLXN0YXJ0IDhzIHN0ZXBzKDEsZW5kKSAwcyAxIG5vcm1hbCBib3RoOy1tb3otYW5pbWF0aW9uOi1hbXAtc3RhcnQgOHMgc3RlcHMoMSxlbmQpIDBzIDEgbm9ybWFsIGJvdGg7LW1zLWFuaW1hdGlvbjotYW1wLXN0YXJ0IDhzIHN0ZXBzKDEsZW5kKSAwcyAxIG5vcm1hbCBib3RoO2FuaW1hdGlvbjotYW1wLXN0YXJ0IDhzIHN0ZXBzKDEsZW5kKSAwcyAxIG5vcm1hbCBib3RofUAtd2Via2l0LWtleWZyYW1lcyAtYW1wLXN0YXJ0e2Zyb217dmlzaWJpbGl0eTpoaWRkZW59dG97dmlzaWJpbGl0eTp2aXNpYmxlfX1ALW1vei1rZXlmcmFtZXMgLWFtcC1zdGFydHtmcm9te3Zpc2liaWxpdHk6aGlkZGVufXRve3Zpc2liaWxpdHk6dmlzaWJsZX19QC1tcy1rZXlmcmFtZXMgLWFtcC1zdGFydHtmcm9te3Zpc2liaWxpdHk6aGlkZGVufXRve3Zpc2liaWxpdHk6dmlzaWJsZX19QC1vLWtleWZyYW1lcyAtYW1wLXN0YXJ0e2Zyb217dmlzaWJpbGl0eTpoaWRkZW59dG97dmlzaWJpbGl0eTp2aXNpYmxlfX1Aa2V5ZnJhbWVzIC1hbXAtc3RhcnR7ZnJvbXt2aXNpYmlsaXR5OmhpZGRlbn10b3t2aXNpYmlsaXR5OnZpc2libGV9fTwvc3R5bGU+PG5vc2NyaXB0PjxzdHlsZSBhbXAtYm9pbGVycGxhdGU+Ym9keXstd2Via2l0LWFuaW1hdGlvbjpub25lOy1tb3otYW5pbWF0aW9uOm5vbmU7LW1zLWFuaW1hdGlvbjpub25lO2FuaW1hdGlvbjpub25lfTwvc3R5bGU+PC9ub3NjcmlwdD4KICA8c2NyaXB0IGFzeW5jIHNyYz0iaHR0cHM6Ly9jZG4uYW1wcHJvamVjdC5vcmcvdjAuanMiPjwvc2NyaXB0PgogIDxzY3JpcHQgYXN5bmMgY3VzdG9tLWVsZW1lbnQ9ImFtcC1pZnJhbWUiIHNyYz0iaHR0cHM6Ly9jZG4uYW1wcHJvamVjdC5vcmcvdjAvYW1wLWlmcmFtZS0wLjEuanMiPjwvc2NyaXB0PgogIDxzdHlsZSBhbXAtY3VzdG9tPgogICAgYm9keSB7IHBhZGRpbmc6MjBweDsgfQogIDwvc3R5bGU+CjwvaGVhZD4KPGJvZHk+CiAgPGgxPlJlc2l6YWJsZSBJZnJhbWUgdy9vIFNTUjwvaDE+CiAgPGFtcC1pZnJhbWUgc3JjPSJodHRwczovL2VtYmVkLnR1bWJsci5jb20vZW1iZWQvcG9zdC8ySlQyWFRhaVR4TzA4d2gyMWRxUXJ3LzkyMDAzMDQ1NjM1IiBsYXlvdXQ9InJlc3BvbnNpdmUiIHdpZHRoPSI1NDAiIGhlaWdodD0iMjgwIiByZXNpemFibGU9IiIgc2FuZGJveD0iYWxsb3ctc2NyaXB0cyBhbGxvdy1wb3B1cHMgYWxsb3ctc2FtZS1vcmlnaW4iPgogICAgPGJ1dHRvbiBvdmVyZmxvdz0iIj5TZWUgbW9yZTwvYnV0dG9uPgogICAgPGEgaHJlZj0iaHR0cHM6Ly9pZnBhaW50aW5nc2NvdWxkdGV4dC50dW1ibHIuY29tL3Bvc3QvOTIwMDMwNDU2MzUvZ3JhbnQtd29vZC1hbWVyaWNhbi1nb3RoaWMtMTkzMCIgcGxhY2Vob2xkZXI9IiI+aHR0cHM6Ly9pZnBhaW50aW5nc2NvdWxkdGV4dC50dW1ibHIuY29tL3Bvc3QvOTIwMDMwNDU2MzUvZ3JhbnQtd29vZC1hbWVyaWNhbi1nb3RoaWMtMTkzMDwvYT4KICA8L2FtcC1pZnJhbWU+CiAgCiAgPHA+CiAgICBJbnRlcmVzdGluZyBzdHVmZiEKICA8L3A+CjwvYm9keT4KPC9odG1sPg==) | [With SSR](https://playground.amp.dev/?mode=Pixel+2#share=PCFET0NUWVBFIGh0bWw+CjxodG1sIOKaoSBpLWFtcGh0bWwtbGF5b3V0IGktYW1waHRtbC1uby1ib2lsZXJwbGF0ZSB0cmFuc2Zvcm1lZD0ic2VsZjt2PTEiPgo8aGVhZD4KICA8bWV0YSBjaGFyc2V0PSJ1dGYtOCI+PHN0eWxlIGFtcC1ydW50aW1lIGktYW1waHRtbC12ZXJzaW9uPSIwMTIxMDEzMDA1MzQwMDUiPmh0bWx7b3ZlcmZsb3cteDpoaWRkZW4haW1wb3J0YW50fWh0bWwuaS1hbXBodG1sLWZpZXtoZWlnaHQ6MTAwJSFpbXBvcnRhbnQ7d2lkdGg6MTAwJSFpbXBvcnRhbnR9aHRtbDpub3QoW2FtcDRhZHNdKSxodG1sOm5vdChbYW1wNGFkc10pIGJvZHl7aGVpZ2h0OmF1dG8haW1wb3J0YW50fWh0bWw6bm90KFthbXA0YWRzXSkgYm9keXttYXJnaW46MCFpbXBvcnRhbnR9Ym9keXstd2Via2l0LXRleHQtc2l6ZS1hZGp1c3Q6MTAwJTstbW96LXRleHQtc2l6ZS1hZGp1c3Q6MTAwJTstbXMtdGV4dC1zaXplLWFkanVzdDoxMDAlO3RleHQtc2l6ZS1hZGp1c3Q6MTAwJX1odG1sLmktYW1waHRtbC1zaW5nbGVkb2MuaS1hbXBodG1sLWVtYmVkZGVkey1tcy10b3VjaC1hY3Rpb246cGFuLXkgcGluY2gtem9vbTt0b3VjaC1hY3Rpb246cGFuLXkgcGluY2gtem9vbX1odG1sLmktYW1waHRtbC1maWU+Ym9keSxodG1sLmktYW1waHRtbC1zaW5nbGVkb2M+Ym9keXtvdmVyZmxvdzp2aXNpYmxlIWltcG9ydGFudH1odG1sLmktYW1waHRtbC1maWU6bm90KC5pLWFtcGh0bWwtaW5hYm94KT5ib2R5LGh0bWwuaS1hbXBodG1sLXNpbmdsZWRvYzpub3QoLmktYW1waHRtbC1pbmFib3gpPmJvZHl7cG9zaXRpb246cmVsYXRpdmUhaW1wb3J0YW50fWh0bWwuaS1hbXBodG1sLWlvcy1lbWJlZC1sZWdhY3k+Ym9keXtvdmVyZmxvdy14OmhpZGRlbiFpbXBvcnRhbnQ7b3ZlcmZsb3cteTphdXRvIWltcG9ydGFudDtwb3NpdGlvbjphYnNvbHV0ZSFpbXBvcnRhbnR9aHRtbC5pLWFtcGh0bWwtaW9zLWVtYmVke292ZXJmbG93LXk6YXV0byFpbXBvcnRhbnQ7cG9zaXRpb246c3RhdGljfSNpLWFtcGh0bWwtd3JhcHBlcntvdmVyZmxvdy14OmhpZGRlbiFpbXBvcnRhbnQ7b3ZlcmZsb3cteTphdXRvIWltcG9ydGFudDtwb3NpdGlvbjphYnNvbHV0ZSFpbXBvcnRhbnQ7dG9wOjAhaW1wb3J0YW50O2xlZnQ6MCFpbXBvcnRhbnQ7cmlnaHQ6MCFpbXBvcnRhbnQ7Ym90dG9tOjAhaW1wb3J0YW50O21hcmdpbjowIWltcG9ydGFudDtkaXNwbGF5OmJsb2NrIWltcG9ydGFudH1odG1sLmktYW1waHRtbC1pb3MtZW1iZWQuaS1hbXBodG1sLWlvcy1vdmVyc2Nyb2xsLGh0bWwuaS1hbXBodG1sLWlvcy1lbWJlZC5pLWFtcGh0bWwtaW9zLW92ZXJzY3JvbGw+I2ktYW1waHRtbC13cmFwcGVyey13ZWJraXQtb3ZlcmZsb3ctc2Nyb2xsaW5nOnRvdWNoIWltcG9ydGFudH0jaS1hbXBodG1sLXdyYXBwZXI+Ym9keXtwb3NpdGlvbjpyZWxhdGl2ZSFpbXBvcnRhbnQ7Ym9yZGVyLXRvcDoxcHggc29saWQgdHJhbnNwYXJlbnQhaW1wb3J0YW50fSNpLWFtcGh0bWwtd3JhcHBlcitib2R5e3Zpc2liaWxpdHk6dmlzaWJsZX0jaS1hbXBodG1sLXdyYXBwZXIrYm9keSAuaS1hbXBodG1sLWxpZ2h0Ym94LWVsZW1lbnQsI2ktYW1waHRtbC13cmFwcGVyK2JvZHlbaS1hbXBodG1sLWxpZ2h0Ym94XXt2aXNpYmlsaXR5OmhpZGRlbn0jaS1hbXBodG1sLXdyYXBwZXIrYm9keVtpLWFtcGh0bWwtbGlnaHRib3hdIC5pLWFtcGh0bWwtbGlnaHRib3gtZWxlbWVudHt2aXNpYmlsaXR5OnZpc2libGV9I2ktYW1waHRtbC13cmFwcGVyLmktYW1waHRtbC1zY3JvbGwtZGlzYWJsZWQsLmktYW1waHRtbC1zY3JvbGwtZGlzYWJsZWR7b3ZlcmZsb3cteDpoaWRkZW4haW1wb3J0YW50O292ZXJmbG93LXk6aGlkZGVuIWltcG9ydGFudH1hbXAtaW5zdGFncmFte3BhZGRpbmc6NTRweCAwcHggMHB4IWltcG9ydGFudDtiYWNrZ3JvdW5kLWNvbG9yOiNmZmZ9YW1wLWlmcmFtZSBpZnJhbWV7Ym94LXNpemluZzpib3JkZXItYm94IWltcG9ydGFudH1bYW1wLWFjY2Vzc11bYW1wLWFjY2Vzcy1oaWRlXXtkaXNwbGF5Om5vbmV9W3N1YnNjcmlwdGlvbnMtZGlhbG9nXSxib2R5Om5vdCguaS1hbXBodG1sLXN1YnMtcmVhZHkpIFtzdWJzY3JpcHRpb25zLWFjdGlvbl0sYm9keTpub3QoLmktYW1waHRtbC1zdWJzLXJlYWR5KSBbc3Vic2NyaXB0aW9ucy1zZWN0aW9uXXtkaXNwbGF5Om5vbmUhaW1wb3J0YW50fWFtcC1leHBlcmltZW50LGFtcC1saXZlLWxpc3Q+W3VwZGF0ZV17ZGlzcGxheTpub25lfS5pLWFtcGh0bWwtamFuay1tZXRlcntwb3NpdGlvbjpmaXhlZDtiYWNrZ3JvdW5kLWNvbG9yOnJnYmEoMjMyLDcyLDk1LDAuNSk7Ym90dG9tOjA7cmlnaHQ6MDtjb2xvcjojZmZmO2ZvbnQtc2l6ZToxNnB4O3otaW5kZXg6MTAwMDtwYWRkaW5nOjVweH1hbXAtbGlzdFtyZXNpemFibGUtY2hpbGRyZW5dPi5pLWFtcGh0bWwtbG9hZGluZy1jb250YWluZXIuYW1wLWhpZGRlbntkaXNwbGF5Om5vbmUhaW1wb3J0YW50fWFtcC1saXN0IFtmZXRjaC1lcnJvcl0sYW1wLWxpc3RbbG9hZC1tb3JlXSBbbG9hZC1tb3JlLWJ1dHRvbl0sYW1wLWxpc3RbbG9hZC1tb3JlXSBbbG9hZC1tb3JlLWVuZF0sYW1wLWxpc3RbbG9hZC1tb3JlXSBbbG9hZC1tb3JlLWZhaWxlZF0sYW1wLWxpc3RbbG9hZC1tb3JlXSBbbG9hZC1tb3JlLWxvYWRpbmdde2Rpc3BsYXk6bm9uZX1hbXAtbGlzdFtkaWZmYWJsZV0gZGl2W3JvbGU9bGlzdF17ZGlzcGxheTpibG9ja31hbXAtc3RvcnktcGFnZSxhbXAtc3Rvcnlbc3RhbmRhbG9uZV17bWluLWhlaWdodDoxcHghaW1wb3J0YW50O2Rpc3BsYXk6YmxvY2shaW1wb3J0YW50O2hlaWdodDoxMDAlIWltcG9ydGFudDttYXJnaW46MCFpbXBvcnRhbnQ7cGFkZGluZzowIWltcG9ydGFudDtvdmVyZmxvdzpoaWRkZW4haW1wb3J0YW50O3dpZHRoOjEwMCUhaW1wb3J0YW50fWFtcC1zdG9yeVtzdGFuZGFsb25lXXtiYWNrZ3JvdW5kLWNvbG9yOiMyMDIxMjUhaW1wb3J0YW50O3Bvc2l0aW9uOnJlbGF0aXZlIWltcG9ydGFudH1hbXAtc3RvcnktcGFnZXtiYWNrZ3JvdW5kLWNvbG9yOiM3NTc1NzV9YW1wLXN0b3J5IC5hbXAtYWN0aXZlPmRpdixhbXAtc3RvcnkgLmktYW1waHRtbC1sb2FkZXItYmFja2dyb3VuZHtkaXNwbGF5Om5vbmUhaW1wb3J0YW50fWFtcC1zdG9yeS1wYWdlOm5vdCg6Zmlyc3Qtb2YtdHlwZSk6bm90KFtkaXN0YW5jZV0pOm5vdChbYWN0aXZlXSl7dHJhbnNmb3JtOnRyYW5zbGF0ZVkoMTAwMHZoKSFpbXBvcnRhbnR9YW1wLWF1dG9jb21wbGV0ZXtwb3NpdGlvbjpyZWxhdGl2ZSFpbXBvcnRhbnQ7ZGlzcGxheTppbmxpbmUtYmxvY2shaW1wb3J0YW50fWFtcC1hdXRvY29tcGxldGU+aW5wdXQsYW1wLWF1dG9jb21wbGV0ZT50ZXh0YXJlYXtwYWRkaW5nOjAuNXJlbTtib3JkZXI6MXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4zMyl9LmktYW1waHRtbC1hdXRvY29tcGxldGUtcmVzdWx0cyxhbXAtYXV0b2NvbXBsZXRlPmlucHV0LGFtcC1hdXRvY29tcGxldGU+dGV4dGFyZWF7Zm9udC1zaXplOjFyZW07bGluZS1oZWlnaHQ6MS41cmVtfVthbXAtZnhePWZseS1pbl17dmlzaWJpbGl0eTpoaWRkZW59YW1wLXNjcmlwdFtub2RvbV17cG9zaXRpb246Zml4ZWQhaW1wb3J0YW50O3RvcDowIWltcG9ydGFudDt3aWR0aDoxcHghaW1wb3J0YW50O2hlaWdodDoxcHghaW1wb3J0YW50O292ZXJmbG93OmhpZGRlbiFpbXBvcnRhbnQ7dmlzaWJpbGl0eTpoaWRkZW59Ci8qIyBzb3VyY2VVUkw9L2Nzcy9hbXBkb2MuY3NzKi9baGlkZGVuXXtkaXNwbGF5Om5vbmUhaW1wb3J0YW50fS5pLWFtcGh0bWwtZWxlbWVudHtkaXNwbGF5OmlubGluZS1ibG9ja30uaS1hbXBodG1sLWJsdXJyeS1wbGFjZWhvbGRlcnt0cmFuc2l0aW9uOm9wYWNpdHkgMC4zcyBjdWJpYy1iZXppZXIoMC4wLDAuMCwwLjIsMSkhaW1wb3J0YW50O3BvaW50ZXItZXZlbnRzOm5vbmV9W2xheW91dD1ub2Rpc3BsYXldOm5vdCguaS1hbXBodG1sLWVsZW1lbnQpe2Rpc3BsYXk6bm9uZSFpbXBvcnRhbnR9LmktYW1waHRtbC1sYXlvdXQtZml4ZWQsW2xheW91dD1maXhlZF1bd2lkdGhdW2hlaWdodF06bm90KC5pLWFtcGh0bWwtbGF5b3V0LWZpeGVkKXtkaXNwbGF5OmlubGluZS1ibG9jaztwb3NpdGlvbjpyZWxhdGl2ZX0uaS1hbXBodG1sLWxheW91dC1yZXNwb25zaXZlLFtsYXlvdXQ9cmVzcG9uc2l2ZV1bd2lkdGhdW2hlaWdodF06bm90KC5pLWFtcGh0bWwtbGF5b3V0LXJlc3BvbnNpdmUpLFt3aWR0aF1baGVpZ2h0XVtoZWlnaHRzXTpub3QoW2xheW91dF0pOm5vdCguaS1hbXBodG1sLWxheW91dC1yZXNwb25zaXZlKSxbd2lkdGhdW2hlaWdodF1bc2l6ZXNdOm5vdChbbGF5b3V0XSk6bm90KC5pLWFtcGh0bWwtbGF5b3V0LXJlc3BvbnNpdmUpe2Rpc3BsYXk6YmxvY2s7cG9zaXRpb246cmVsYXRpdmV9LmktYW1waHRtbC1sYXlvdXQtaW50cmluc2ljLFtsYXlvdXQ9aW50cmluc2ljXVt3aWR0aF1baGVpZ2h0XTpub3QoLmktYW1waHRtbC1sYXlvdXQtaW50cmluc2ljKXtkaXNwbGF5OmlubGluZS1ibG9jaztwb3NpdGlvbjpyZWxhdGl2ZTttYXgtd2lkdGg6MTAwJX0uaS1hbXBodG1sLWxheW91dC1pbnRyaW5zaWMgLmktYW1waHRtbC1zaXplcnttYXgtd2lkdGg6MTAwJX0uaS1hbXBodG1sLWludHJpbnNpYy1zaXplcnttYXgtd2lkdGg6MTAwJTtkaXNwbGF5OmJsb2NrIWltcG9ydGFudH0uaS1hbXBodG1sLWxheW91dC1jb250YWluZXIsLmktYW1waHRtbC1sYXlvdXQtZml4ZWQtaGVpZ2h0LFtsYXlvdXQ9Y29udGFpbmVyXSxbbGF5b3V0PWZpeGVkLWhlaWdodF1baGVpZ2h0XTpub3QoLmktYW1waHRtbC1sYXlvdXQtZml4ZWQtaGVpZ2h0KXtkaXNwbGF5OmJsb2NrO3Bvc2l0aW9uOnJlbGF0aXZlfS5pLWFtcGh0bWwtbGF5b3V0LWZpbGwsLmktYW1waHRtbC1sYXlvdXQtZmlsbC5pLWFtcGh0bWwtbm90YnVpbHQsW2xheW91dD1maWxsXTpub3QoLmktYW1waHRtbC1sYXlvdXQtZmlsbCl7ZGlzcGxheTpibG9jaztvdmVyZmxvdzpoaWRkZW4haW1wb3J0YW50O3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2xlZnQ6MDtib3R0b206MDtyaWdodDowfS5pLWFtcGh0bWwtbGF5b3V0LWZsZXgtaXRlbSxbbGF5b3V0PWZsZXgtaXRlbV06bm90KC5pLWFtcGh0bWwtbGF5b3V0LWZsZXgtaXRlbSl7ZGlzcGxheTpibG9jaztwb3NpdGlvbjpyZWxhdGl2ZTstbXMtZmxleDoxIDEgYXV0bztmbGV4OjEgMSBhdXRvfS5pLWFtcGh0bWwtbGF5b3V0LWZsdWlke3Bvc2l0aW9uOnJlbGF0aXZlfS5pLWFtcGh0bWwtbGF5b3V0LXNpemUtZGVmaW5lZHtvdmVyZmxvdzpoaWRkZW4haW1wb3J0YW50fS5pLWFtcGh0bWwtbGF5b3V0LWF3YWl0aW5nLXNpemV7cG9zaXRpb246YWJzb2x1dGUhaW1wb3J0YW50O3RvcDphdXRvIWltcG9ydGFudDtib3R0b206YXV0byFpbXBvcnRhbnR9aS1hbXBodG1sLXNpemVye2Rpc3BsYXk6YmxvY2shaW1wb3J0YW50fUBzdXBwb3J0cyAoYXNwZWN0LXJhdGlvOjEvMSl7aS1hbXBodG1sLXNpemVyLmktYW1waHRtbC1kaXNhYmxlLWFye2Rpc3BsYXk6bm9uZSFpbXBvcnRhbnR9fS5pLWFtcGh0bWwtYmx1cnJ5LXBsYWNlaG9sZGVyLC5pLWFtcGh0bWwtZmlsbC1jb250ZW50e2Rpc3BsYXk6YmxvY2s7aGVpZ2h0OjA7bWF4LWhlaWdodDoxMDAlO21heC13aWR0aDoxMDAlO21pbi1oZWlnaHQ6MTAwJTttaW4td2lkdGg6MTAwJTt3aWR0aDowO21hcmdpbjphdXRvfS5pLWFtcGh0bWwtbGF5b3V0LXNpemUtZGVmaW5lZCAuaS1hbXBodG1sLWZpbGwtY29udGVudHtwb3NpdGlvbjphYnNvbHV0ZTt0b3A6MDtsZWZ0OjA7Ym90dG9tOjA7cmlnaHQ6MH0uaS1hbXBodG1sLXJlcGxhY2VkLWNvbnRlbnQsLmktYW1waHRtbC1zY3JlZW4tcmVhZGVye3BhZGRpbmc6MCFpbXBvcnRhbnQ7Ym9yZGVyOm5vbmUhaW1wb3J0YW50fS5pLWFtcGh0bWwtc2NyZWVuLXJlYWRlcntwb3NpdGlvbjpmaXhlZCFpbXBvcnRhbnQ7dG9wOjBweCFpbXBvcnRhbnQ7bGVmdDowcHghaW1wb3J0YW50O3dpZHRoOjRweCFpbXBvcnRhbnQ7aGVpZ2h0OjRweCFpbXBvcnRhbnQ7b3BhY2l0eTowIWltcG9ydGFudDtvdmVyZmxvdzpoaWRkZW4haW1wb3J0YW50O21hcmdpbjowIWltcG9ydGFudDtkaXNwbGF5OmJsb2NrIWltcG9ydGFudDt2aXNpYmlsaXR5OnZpc2libGUhaW1wb3J0YW50fS5pLWFtcGh0bWwtc2NyZWVuLXJlYWRlcn4uaS1hbXBodG1sLXNjcmVlbi1yZWFkZXJ7bGVmdDo4cHghaW1wb3J0YW50fS5pLWFtcGh0bWwtc2NyZWVuLXJlYWRlcn4uaS1hbXBodG1sLXNjcmVlbi1yZWFkZXJ+LmktYW1waHRtbC1zY3JlZW4tcmVhZGVye2xlZnQ6MTJweCFpbXBvcnRhbnR9LmktYW1waHRtbC1zY3JlZW4tcmVhZGVyfi5pLWFtcGh0bWwtc2NyZWVuLXJlYWRlcn4uaS1hbXBodG1sLXNjcmVlbi1yZWFkZXJ+LmktYW1waHRtbC1zY3JlZW4tcmVhZGVye2xlZnQ6MTZweCFpbXBvcnRhbnR9LmktYW1waHRtbC11bnJlc29sdmVke3Bvc2l0aW9uOnJlbGF0aXZlO292ZXJmbG93OmhpZGRlbiFpbXBvcnRhbnR9LmktYW1waHRtbC1zZWxlY3QtZGlzYWJsZWR7LXdlYmtpdC11c2VyLXNlbGVjdDpub25lIWltcG9ydGFudDstbXMtdXNlci1zZWxlY3Q6bm9uZSFpbXBvcnRhbnQ7dXNlci1zZWxlY3Q6bm9uZSFpbXBvcnRhbnR9LmktYW1waHRtbC1ub3RidWlsdCxbbGF5b3V0XTpub3QoLmktYW1waHRtbC1lbGVtZW50KSxbd2lkdGhdW2hlaWdodF1baGVpZ2h0c106bm90KFtsYXlvdXRdKTpub3QoLmktYW1waHRtbC1lbGVtZW50KSxbd2lkdGhdW2hlaWdodF1bc2l6ZXNdOm5vdChbbGF5b3V0XSk6bm90KC5pLWFtcGh0bWwtZWxlbWVudCl7cG9zaXRpb246cmVsYXRpdmU7b3ZlcmZsb3c6aGlkZGVuIWltcG9ydGFudDtjb2xvcjp0cmFuc3BhcmVudCFpbXBvcnRhbnR9LmktYW1waHRtbC1ub3RidWlsdDpub3QoLmktYW1waHRtbC1sYXlvdXQtY29udGFpbmVyKT4qLFtsYXlvdXRdOm5vdChbbGF5b3V0PWNvbnRhaW5lcl0pOm5vdCguaS1hbXBodG1sLWVsZW1lbnQpPiosW3dpZHRoXVtoZWlnaHRdW2hlaWdodHNdOm5vdChbbGF5b3V0XSk6bm90KC5pLWFtcGh0bWwtZWxlbWVudCk+Kixbd2lkdGhdW2hlaWdodF1bc2l6ZXNdOm5vdChbbGF5b3V0XSk6bm90KC5pLWFtcGh0bWwtZWxlbWVudCk+KntkaXNwbGF5Om5vbmV9YW1wLWltZzpub3QoLmktYW1waHRtbC1lbGVtZW50KVtpLWFtcGh0bWwtc3NyXT5pbWcuaS1hbXBodG1sLWZpbGwtY29udGVudHtkaXNwbGF5OmJsb2NrfS5pLWFtcGh0bWwtbm90YnVpbHQ6bm90KC5pLWFtcGh0bWwtbGF5b3V0LWNvbnRhaW5lciksW2xheW91dF06bm90KFtsYXlvdXQ9Y29udGFpbmVyXSk6bm90KC5pLWFtcGh0bWwtZWxlbWVudCksW3dpZHRoXVtoZWlnaHRdW2hlaWdodHNdOm5vdChbbGF5b3V0XSk6bm90KC5pLWFtcGh0bWwtZWxlbWVudCksW3dpZHRoXVtoZWlnaHRdW3NpemVzXTpub3QoW2xheW91dF0pOm5vdCguaS1hbXBodG1sLWVsZW1lbnQpe2NvbG9yOnRyYW5zcGFyZW50IWltcG9ydGFudDtsaW5lLWhlaWdodDowIWltcG9ydGFudH0uaS1hbXBodG1sLWdob3N0e3Zpc2liaWxpdHk6aGlkZGVuIWltcG9ydGFudH0uaS1hbXBodG1sLWVsZW1lbnQ+W3BsYWNlaG9sZGVyXSxbbGF5b3V0XTpub3QoLmktYW1waHRtbC1lbGVtZW50KT5bcGxhY2Vob2xkZXJdLFt3aWR0aF1baGVpZ2h0XVtoZWlnaHRzXTpub3QoW2xheW91dF0pOm5vdCguaS1hbXBodG1sLWVsZW1lbnQpPltwbGFjZWhvbGRlcl0sW3dpZHRoXVtoZWlnaHRdW3NpemVzXTpub3QoW2xheW91dF0pOm5vdCguaS1hbXBodG1sLWVsZW1lbnQpPltwbGFjZWhvbGRlcl17ZGlzcGxheTpibG9jaztsaW5lLWhlaWdodDpub3JtYWx9LmktYW1waHRtbC1lbGVtZW50PltwbGFjZWhvbGRlcl0uYW1wLWhpZGRlbiwuaS1hbXBodG1sLWVsZW1lbnQ+W3BsYWNlaG9sZGVyXS5oaWRkZW57dmlzaWJpbGl0eTpoaWRkZW59LmktYW1waHRtbC1lbGVtZW50Om5vdCguYW1wLW5vdHN1cHBvcnRlZCk+W2ZhbGxiYWNrXSwuaS1hbXBodG1sLWxheW91dC1jb250YWluZXI+W3BsYWNlaG9sZGVyXS5hbXAtaGlkZGVuLC5pLWFtcGh0bWwtbGF5b3V0LWNvbnRhaW5lcj5bcGxhY2Vob2xkZXJdLmhpZGRlbntkaXNwbGF5Om5vbmV9LmktYW1waHRtbC1sYXlvdXQtc2l6ZS1kZWZpbmVkPltmYWxsYmFja10sLmktYW1waHRtbC1sYXlvdXQtc2l6ZS1kZWZpbmVkPltwbGFjZWhvbGRlcl17cG9zaXRpb246YWJzb2x1dGUhaW1wb3J0YW50O3RvcDowIWltcG9ydGFudDtsZWZ0OjAhaW1wb3J0YW50O3JpZ2h0OjAhaW1wb3J0YW50O2JvdHRvbTowIWltcG9ydGFudDt6LWluZGV4OjF9LmktYW1waHRtbC1ub3RidWlsdD5bcGxhY2Vob2xkZXJde2Rpc3BsYXk6YmxvY2shaW1wb3J0YW50fS5pLWFtcGh0bWwtaGlkZGVuLWJ5LW1lZGlhLXF1ZXJ5e2Rpc3BsYXk6bm9uZSFpbXBvcnRhbnR9LmktYW1waHRtbC1lbGVtZW50LWVycm9ye2JhY2tncm91bmQ6cmVkIWltcG9ydGFudDtjb2xvcjojZmZmIWltcG9ydGFudDtwb3NpdGlvbjpyZWxhdGl2ZSFpbXBvcnRhbnR9LmktYW1waHRtbC1lbGVtZW50LWVycm9yOmJlZm9yZXtjb250ZW50OmF0dHIoZXJyb3ItbWVzc2FnZSl9aS1hbXAtc2Nyb2xsLWNvbnRhaW5lcixpLWFtcGh0bWwtc2Nyb2xsLWNvbnRhaW5lcntwb3NpdGlvbjphYnNvbHV0ZTt0b3A6MDtsZWZ0OjA7cmlnaHQ6MDtib3R0b206MDtkaXNwbGF5OmJsb2NrfWktYW1wLXNjcm9sbC1jb250YWluZXIuYW1wLWFjdGl2ZSxpLWFtcGh0bWwtc2Nyb2xsLWNvbnRhaW5lci5hbXAtYWN0aXZle292ZXJmbG93OmF1dG87LXdlYmtpdC1vdmVyZmxvdy1zY3JvbGxpbmc6dG91Y2h9LmktYW1waHRtbC1sb2FkaW5nLWNvbnRhaW5lcntkaXNwbGF5OmJsb2NrIWltcG9ydGFudDtwb2ludGVyLWV2ZW50czpub25lO3otaW5kZXg6MX0uaS1hbXBodG1sLW5vdGJ1aWx0Pi5pLWFtcGh0bWwtbG9hZGluZy1jb250YWluZXJ7ZGlzcGxheTpibG9jayFpbXBvcnRhbnR9LmktYW1waHRtbC1sb2FkaW5nLWNvbnRhaW5lci5hbXAtaGlkZGVue3Zpc2liaWxpdHk6aGlkZGVufS5pLWFtcGh0bWwtZWxlbWVudD5bb3ZlcmZsb3dde2N1cnNvcjpwb2ludGVyO3Bvc2l0aW9uOnJlbGF0aXZlO3otaW5kZXg6Mjt2aXNpYmlsaXR5OmhpZGRlbjtkaXNwbGF5OmluaXRpYWw7bGluZS1oZWlnaHQ6bm9ybWFsfS5pLWFtcGh0bWwtZWxlbWVudD5bb3ZlcmZsb3ddLmFtcC12aXNpYmxle3Zpc2liaWxpdHk6dmlzaWJsZX10ZW1wbGF0ZXtkaXNwbGF5Om5vbmUhaW1wb3J0YW50fS5hbXAtYm9yZGVyLWJveCwuYW1wLWJvcmRlci1ib3ggKiwuYW1wLWJvcmRlci1ib3ggOmFmdGVyLC5hbXAtYm9yZGVyLWJveCA6YmVmb3Jle2JveC1zaXppbmc6Ym9yZGVyLWJveH1hbXAtcGl4ZWx7ZGlzcGxheTpub25lIWltcG9ydGFudH1hbXAtYW5hbHl0aWNzLGFtcC1hdXRvLWFkcyxhbXAtc3RvcnktYXV0by1hZHN7cG9zaXRpb246Zml4ZWQhaW1wb3J0YW50O3RvcDowIWltcG9ydGFudDt3aWR0aDoxcHghaW1wb3J0YW50O2hlaWdodDoxcHghaW1wb3J0YW50O292ZXJmbG93OmhpZGRlbiFpbXBvcnRhbnQ7dmlzaWJpbGl0eTpoaWRkZW59aHRtbC5pLWFtcGh0bWwtZmllPmFtcC1hbmFseXRpY3N7cG9zaXRpb246aW5pdGlhbCFpbXBvcnRhbnR9W3Zpc2libGUtd2hlbi1pbnZhbGlkXTpub3QoLnZpc2libGUpLGZvcm0gW3N1Ym1pdC1lcnJvcl0sZm9ybSBbc3VibWl0LXN1Y2Nlc3NdLGZvcm0gW3N1Ym1pdHRpbmdde2Rpc3BsYXk6bm9uZX1hbXAtYWNjb3JkaW9ue2Rpc3BsYXk6YmxvY2shaW1wb3J0YW50fWFtcC1hY2NvcmRpb24+c2VjdGlvbntmbG9hdDpub25lIWltcG9ydGFudH1hbXAtYWNjb3JkaW9uPnNlY3Rpb24+KntmbG9hdDpub25lIWltcG9ydGFudDtkaXNwbGF5OmJsb2NrIWltcG9ydGFudDtvdmVyZmxvdzpoaWRkZW4haW1wb3J0YW50O3Bvc2l0aW9uOnJlbGF0aXZlIWltcG9ydGFudH1hbXAtYWNjb3JkaW9uLGFtcC1hY2NvcmRpb24+c2VjdGlvbnttYXJnaW46MH1hbXAtYWNjb3JkaW9uOm5vdCguaS1hbXBodG1sLWJ1aWx0KT5zZWN0aW9uPjpsYXN0LWNoaWxke2Rpc3BsYXk6bm9uZSFpbXBvcnRhbnR9YW1wLWFjY29yZGlvbjpub3QoLmktYW1waHRtbC1idWlsdCk+c2VjdGlvbltleHBhbmRlZF0+Omxhc3QtY2hpbGR7ZGlzcGxheTpibG9jayFpbXBvcnRhbnR9Ci8qIyBzb3VyY2VVUkw9L2Nzcy9hbXBzaGFyZWQuY3NzKi88L3N0eWxlPgogIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgiPgogIDxsaW5rIHJlbD0icHJlbG9hZCIgaHJlZj0iaHR0cHM6Ly9jZG4uYW1wcHJvamVjdC5vcmcvdjAuanMiIGFzPSJzY3JpcHQiPgogIDxzY3JpcHQgYXN5bmMgc3JjPSJodHRwczovL2Nkbi5hbXBwcm9qZWN0Lm9yZy92MC5qcyI+PC9zY3JpcHQ+CiAgPHNjcmlwdCBhc3luYyBjdXN0b20tZWxlbWVudD0iYW1wLWlmcmFtZSIgc3JjPSJodHRwczovL2Nkbi5hbXBwcm9qZWN0Lm9yZy92MC9hbXAtaWZyYW1lLTAuMS5qcyI+PC9zY3JpcHQ+CiAgPHRpdGxlPlJlc2l6YWJsZSBJZnJhbWUgdy8gU1NSPC90aXRsZT4KICA8bGluayByZWw9ImNhbm9uaWNhbCIgaHJlZj0ic2VsZi5odG1sIj48c3R5bGUgYW1wLWN1c3RvbT5ib2R5e3BhZGRpbmc6MjBweH08L3N0eWxlPgo8L2hlYWQ+Cjxib2R5PgogIDxoMT5SZXNpemFibGUgSWZyYW1lIHcvIFNTUjwvaDE+CiAgPGFtcC1pZnJhbWUgc3JjPSJodHRwczovL2VtYmVkLnR1bWJsci5jb20vZW1iZWQvcG9zdC8ySlQyWFRhaVR4TzA4d2gyMWRxUXJ3LzkyMDAzMDQ1NjM1IiBsYXlvdXQ9InJlc3BvbnNpdmUiIHdpZHRoPSI1NDAiIGhlaWdodD0iMjgwIiByZXNpemFibGUgc2FuZGJveD0iYWxsb3ctc2NyaXB0cyBhbGxvdy1wb3B1cHMgYWxsb3ctc2FtZS1vcmlnaW4iIGNsYXNzPSJpLWFtcGh0bWwtbGF5b3V0LXJlc3BvbnNpdmUgaS1hbXBodG1sLWxheW91dC1zaXplLWRlZmluZWQiIGktYW1waHRtbC1sYXlvdXQ9InJlc3BvbnNpdmUiPgogICAgPGktYW1waHRtbC1zaXplciBzdHlsZT0iZGlzcGxheTpibG9jaztwYWRkaW5nLXRvcDo1MS44NTE5JSI+PC9pLWFtcGh0bWwtc2l6ZXI+IDxidXR0b24gb3ZlcmZsb3c+U2VlIG1vcmU8L2J1dHRvbj4gPGEgaHJlZj0iaHR0cHM6Ly9pZnBhaW50aW5nc2NvdWxkdGV4dC50dW1ibHIuY29tL3Bvc3QvOTIwMDMwNDU2MzUvZ3JhbnQtd29vZC1hbWVyaWNhbi1nb3RoaWMtMTkzMCIgcGxhY2Vob2xkZXI+aHR0cHM6Ly9pZnBhaW50aW5nc2NvdWxkdGV4dC50dW1ibHIuY29tL3Bvc3QvOTIwMDMwNDU2MzUvZ3JhbnQtd29vZC1hbWVyaWNhbi1nb3RoaWMtMTkzMDwvYT4KICA8L2FtcC1pZnJhbWU+CiAgPHA+IEludGVyZXN0aW5nIHN0dWZmISA8L3A+CjwvYm9keT4KPC9odG1sPg==)
-----------|------------
 | 
Contributor guide
Research direction
Start with the SSR transformation responsible for inserting the i-amphtml-sizer element, using the linked AMP Playground examples and PR #5926 to reproduce the responsive amp-iframe case. Done means the overflow button remains visible and is placed consistently in both SSR and non-SSR output.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- tooling, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100