Bug: amp-img forced to fixed with XHR source and amp-render

[AaronMLB]

Description

I am rendering a page with some additional content coming in by XHR (via amp-render) depending on the user's level of permissions.

Parsing this content with an amp-mustache template, everything works fine except amp-img. These are delivered as a whole AMP HTML element and rendered (supposedly) directly through the mustache triple braces, except the layout attribute is being forcibly rewritten from intrinsic to fixed, so the images are not scaling and correctly responsive for mobile devices.

Reproduction Steps

The full template is as follows:

        <amp-render src="/api/quiz/123/bonus/" layout="container" credentials="include" xssi-prefix=")]}\*" class="quiz-bonus">
            <div placeholder>Bonus questions loading...</div>
            <div overflow></div>
            <template type="amp-mustache">
                {{{blurb}}}
                {{#questions}}
                    <h2 class="quiz-question">{{{question}}}</h2>
                    {{{extra}}}
                    {{{image}}}
                    {{#options}}
                        <div class="radio">
                            <input type="radio" name="question[{{number}}]" id="question{{number}}{{optNumber}}" value="{{optNumber}}">
                            <label for="question{{number}}{{optNumber}}">{{{option}}}</label>
                        </div>
                    {{/options}}
                {{/questions}}
            </template>
        </amp-render>

A typical question object from that JSON response is as follows:

{
  "question": "11. Which of these is NOT the title of an episode of <em>The Burkiss Way</em>?",
  "options": [
    {
      "optNumber": 1,
      "number": 11,
      "option": "Wave Goodbye To Knighthoods The Burkiss Way"
    },
    {
      "optNumber": 2,
      "number": 11,
      "option": "Not The Burkiss Way"
    },
    {
      "optNumber": 3,
      "number": 11,
      "option": "Make Short Comedy Programmes The Burkiss Way"
    },
    {
      "optNumber": 4,
      "number": 11,
      "option": "Ignore These Programme Titles The Burkiss Way"
    },
    {
      "optNumber": 5,
      "number": 11,
      "option": "Write Extremely Long Titles With Lots And Lots Of Words In, Like This, So Radio Times Will Have To Allot More Space..."
    }
  ],
  "image": "<amp-img src=\"https://cdn.comedy.co.uk/images/library/comedies/900x450/b/burkiss_way.jpg\" width=\"900\" height=\"450\" alt=\"The Burkiss Way\" title=\"The Burkiss Way\" class=\"quiz-image\" layout=\"intrinsic\"><div fallback>The Burkiss Way</div></amp-img>"
}

However, the resulting amp-img element is rendered thus, fixed not intrinsic as specified:

<amp-img src="https://cdn.comedy.co.uk/images/library/comedies/900x450/b/burkiss_way.jpg" width="900" height="450" alt="The Burkiss Way" title="The Burkiss Way" class="quiz-image i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout" i-amphtml-ignore="" i-amphtml-layout="fixed" style="width: 900px; height: 450px;"><div>The Burkiss Way</div><img decoding="async" alt="The Burkiss Way" title="The Burkiss Way" src="https://cdn.comedy.co.uk/images/library/comedies/900x450/b/burkiss_way.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>

The amp-render being used is version 1.0, whilst amp-mustache is 0.2.

Relevant Logs

No response

Browser(s) Affected

No response

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

2111060251009

[AaronMLB]

Hi @dmanek; have you been able to look at this issue in the last few months? Can you provide any insight or recommendations? Thanks!

[Marvbuster]

I have the same issue. amp-img elements delivered by xhr-response will be stripped of its layout attribute and are rendered as "fixed".

but since this is an open issue for quite some time now and no one is assigned, i guess i have to fall back to fixed-sized/centered images in combination with multiple viewports defined in the srcset attribute, but thats no clean solution and adds a lot of unnecessary code to our amp page.

Edit: when implementing the srcset solution i stumbled upon a possible solution. If the amp-img tag has a sizes attribute with a valid value, the layout attribute won't be omitted anymore. In my case i used sizes="100%".

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

[AaronMLB]

It would be nice to have this sorted at some point. It's not a non-issue, just has been ignored.