In an amp-form, the submit-success template is not applying the class to all elements in iterated content.
<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>
{
"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"
}
]
}
Chrome, Firefox and Safari. Probably all browsers.
1534872626733
The issue appeared after this version was released
looks like something wrong with
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.
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?
@choumx https://www.stylist.co.uk/life/careers/worst-most-annoying-phrases-words-sentences-on-work-email-adobe-survey-careers-jobs/224663/amp (was updated to moustache 0.2
this morning)
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.