Inconsistency in placement of overflow button when SSR prepends sizer element

[westonruter]

In ampproject/amp-wp#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:

<amp-iframe src="https://embed.tumblr.com/embed/post/2JT2XTaiTxO08wh21dqQrw/92003045635" layout="responsive" width="540" height="280" resizable sandbox="allow-scripts allow-popups allow-same-origin" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
    <i-amphtml-sizer style="display:block;padding-top:51.8519%"></i-amphtml-sizer>
    <button overflow>See more</button>
    <a href="https://ifpaintingscouldtext.tumblr.com/post/92003045635/grant-wood-american-gothic-1930" placeholder>https://ifpaintingscouldtext.tumblr.com/post/92003045635/grant-wood-american-gothic-1930</a>
</amp-iframe>

Whereas on the non-SSR'ed page, this is absent:

<amp-iframe src="https://embed.tumblr.com/embed/post/2JT2XTaiTxO08wh21dqQrw/92003045635" layout="responsive" width="540" height="280" resizable="" sandbox="allow-scripts allow-popups allow-same-origin">
    <button overflow="">See more</button>
    <a href="https://ifpaintingscouldtext.tumblr.com/post/92003045635/grant-wood-american-gothic-1930" placeholder="">https://ifpaintingscouldtext.tumblr.com/post/92003045635/grant-wood-american-gothic-1930</a>
</amp-iframe>

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:

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	With SSR

[sebastianbenz]

Good one! Have you also checked how the AMP Cache handles this?

[westonruter]

I can see it is also prepending the sizer: https://plum--skinny--collard-glitch-me.cdn.ampproject.org/c/s/plum-skinny-collard.glitch.me/

[sebastianbenz]

Can you file an internal bug as well?

…

[westonruter]

Done: b/181895985

Interestingly, I'm also now seeing the AMP runtime prepending the i-amphtml-sizer on the non-SSR'ed page… sometimes(?). Maybe I was seeing an experiment with aspect-ratio which bypassed the runtime from adding i-amphtml-sizer and in that case the overflow button was positioned within view.

[westonruter]

Maybe I was seeing an experiment with aspect-ratio which bypassed the runtime from adding i-amphtml-sizer and in that case the overflow button was positioned within view.

Seems I was seeing layout-aspect-ratio-css which is being unlaunched: ampproject/amphtml#33050.