Amphtml: amp-mustache-0.2 drops attributes in rendered output

Created on 22 Aug 2018  路  10Comments  路  Source: ampproject/amphtml

What's the issue?

In an amp-form, the submit-success template is not applying the class to all elements in iterated content.

How do we reproduce the issue?

  1. Create an amp form with a submit-success div
  2. The template likely needs to have a section that is iterated {{#items}}{{/items}}
        <div submit-success class="SearchResults">
            <template type="amp-mustache">
                {{#items}}
                    <div class="list-item">
                        <amp-img class="thumbnail"
                            src="{{thumbnail}}"
                            width="80"
                            height="80">
                        </amp-img>
                        <div class="bg-list-text fl">
                            <h2 class="list-title">{{fullname}}</h2>
                        </div>
                    </div>
                {{/items}}
            </template>
        </div>
  1. The form response must get a list of items nested within an object
{
   "total":970,
   "start":0,
   "limit":40,
   "items":[
      {
         "record_id":"19448144",
         "family_names":"Adam",
         "maiden_names":"Moncur",
         "given_names":"Annie",
         "fullname":"Annie Adam (Moncur)",
         "thumbnail":"https:\/\/s3.amazonaws.com\/bg.ami.com\/headstones\/thumbnails\/20160421\/16421504.jpg"
      }
   ]
}
  1. When the list is rendered on submit-success, the class attribute is dropped off of all items except for the first div inside the template.
  2. The template still has the class attributes, but the rendered html does not.

What browsers are affected?

Chrome, Firefox and Safari. Probably all browsers.

Which AMP version is affected?

1534872626733
The issue appeared after this version was released

Drop Everything Bug runtime

Most helpful comment

The rollback is live for both cache-origin and publisher-origin pages. Closing as this issue is now resolved in production.

We'll roll forward this week's release (#17636) with the cherry-picked fix tomorrow.

All 10 comments

looks like something wrong with . I have same issue in amp-list with amp-mustache.
demo page

if I change amp-mustache version from 0.2 to 0.1, everything will run well.
https://cdn.ampproject.org/v0/amp-mustache-0.1.js

I just ran into the same problem when I was using amp-list to render a list of items.
Here is part of my amp-mustache template:

{{#countryName}}
    {{#countryNameLowerCase}}
        <amp-img src="{{countryNameLowerCase}}.png"
        alt="{{fullCountryName}}" class="icon-country" layout="responsive" width="21" height="14"></amp-img>
    {{/countryNameLowerCase}}
    <span class="country-name">{{countryName}}</span>
{{/countryName}}
{{#isP4P}}
    <div class="product-p4p-cn">Ad</div>
{{/isP4P}}
{{^isMarket}}
    <div class="contact-container">
        <a rel="nofollow" class="contact-wrap ripple" href="{{contactSupplierUrl}}">Contact Supplier</a>
    </div>
{{/isMarket}}

It's rendered into HTML like this:

<amp-img height="14" width="21" layout="responsive" class="icon-country i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" alt="China" src="cn.png"><i-amphtml-sizer style="display: block; padding-top: 66.6667%;"></i-amphtml-sizer><img decoding="async" alt="China" src="cn.png" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>
<span>CN</span>
<div>Ad</div>
<div><a target="_top" href="long url" rel="nofollow">Contact Supplier</a></div>

The class attributes on amp-img's are kept, but those on div, a and span's are dropped.

If I switch back to version 0.1 of amp-mustache, the problem is gone.

We are experiencing the same issue with amp-mustache, v0.1 is the fix for us as well.

Thanks for the report. I believe this was caused by #17434 and introduced in version 1534872626733. I just merged a fix in #17675 and we'll cherry-pick this into prod tomorrow.

I'll leave this issue open until it's resolved in production.

Bumping to P0 since this appears to be breaking page rendering pretty badly in some cases.

We've rolled back the affected release (1534872626733) to last week's (1534872626733). Should be live within the hour.

The rollback is live for both cache-origin and publisher-origin pages. Closing as this issue is now resolved in production.

We'll roll forward this week's release (#17636) with the cherry-picked fix tomorrow.

screen shot 2018-08-31 at 11 28 27

Hi All - I know this issue is closed, but... since 8 days ago - we've seen 10k 404 pages added in search console due Google indexing pages called /foo/bar/baz/{{link}} - Some mis-parsing of our Mustache templates on AMP - and Absolute/Relative URL collision.

@jonsherrard Do you have a link to a page that reproduces this?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

edhollinghurst picture edhollinghurst  路  3Comments

akshaylive picture akshaylive  路  3Comments

Download picture Download  路  3Comments

mkhatib picture mkhatib  路  3Comments

torch2424 picture torch2424  路  3Comments