Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AMP4EMAIL: multiple amp-selector inside amp-list #23450

Open
alexandr-kazakov opened this issue Jul 22, 2019 · 5 comments

Comments

@alexandr-kazakov
Copy link

commented Jul 22, 2019

What's the issue?

amp-selector inside amp-list sometimes does not appear in gmail and gives an error:

v0.js:142 Error proxying amp-list templates: Request viewerRenderTemplate failed: Error: Class$obf_1011: Hwa​​​
Uncaught (in promise) Error: Class$obf_1011: Hwa

It somehow depends on the number of amp-selector blocks inside the amp-list. If there are few blocks with amp-selector, everything works fine in gmail, and if there are many blocks with amp-selector, they are not displayed.

How do we reproduce the issue?

I have prepared a detailed example.

1). This is a fully valid amp4email code:

<!DOCTYPE html>
      <html ⚡4email>
        <head>
          <meta charset="utf-8" />
          <script async src="https://cdn.ampproject.org/v0.js"></script>
          <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
          <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
          <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
          <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
          <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
          <style amp4email-boilerplate>
            body {
              visibility: hidden;
            }
          </style>
          <style amp-custom>
            html {
              line-height: 1.15;
              -webkit-text-size-adjust: 100%;
            }
      
            body {
              margin: 0;
            }
      
            main {
              display: block;
            }
      
            h1 {
              font-size: 2em;
              margin: 0.67em 0;
            }
      
            hr {
              -webkit-box-sizing: content-box;
              box-sizing: content-box;
              height: 0;
              overflow: visible;
            }
      
            pre {
              font-family: monospace, monospace;
              font-size: 1em;
            }
      
            a {
              background-color: transparent;
            }
      
            abbr[title] {
              border-bottom: none;
              text-decoration: underline;
              -webkit-text-decoration: underline dotted;
              text-decoration: underline dotted;
            }
      
            b,
            strong {
              font-weight: bolder;
            }
      
            code,
            kbd,
            samp {
              font-family: monospace, monospace;
              font-size: 1em;
            }
      
            small {
              font-size: 80%;
            }
      
            sub,
            sup {
              font-size: 75%;
              line-height: 0;
              position: relative;
              vertical-align: baseline;
            }
      
            sub {
              bottom: -0.25em;
            }
      
            sup {
              top: -0.5em;
            }
      
            img {
              border-style: none;
            }
      
            button,
            input,
            optgroup,
            select,
            textarea {
              font-family: inherit;
              font-size: 100%;
              line-height: 1.15;
              margin: 0;
            }
      
            button,
            input {
              overflow: visible;
            }
      
            button,
            select {
              text-transform: none;
            }
      
            button,
            [type='button'],
            [type='reset'],
            [type='submit'] {
              -webkit-appearance: button;
            }
      
            button::-moz-focus-inner,
            [type='button']::-moz-focus-inner,
            [type='reset']::-moz-focus-inner,
            [type='submit']::-moz-focus-inner {
              border-style: none;
              padding: 0;
            }
      
            button:-moz-focusring,
            [type='button']:-moz-focusring,
            [type='reset']:-moz-focusring,
            [type='submit']:-moz-focusring {
              outline: 1px dotted ButtonText;
            }
      
            fieldset {
              padding: 0.35em 0.75em 0.625em;
            }
      
            legend {
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              color: inherit;
              display: table;
              max-width: 100%;
              padding: 0;
              white-space: normal;
            }
      
            progress {
              vertical-align: baseline;
            }
      
            textarea {
              overflow: auto;
            }
      
            [type='checkbox'],
            [type='radio'] {
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              padding: 0;
            }
      
            [type='number']::-webkit-inner-spin-button,
            [type='number']::-webkit-outer-spin-button {
              height: auto;
            }
      
            [type='search'] {
              -webkit-appearance: textfield;
              outline-offset: -2px;
            }
      
            [type='search']::-webkit-search-decoration {
              -webkit-appearance: none;
            }
      
            ::-webkit-file-upload-button {
              -webkit-appearance: button;
              font: inherit;
            }
      
            details {
              display: block;
            }
      
            summary {
              display: list-item;
            }
      
            template {
              display: none;
            }
      
            [hidden] {
              display: none;
            }
      
            html {
              font-size: 62.5%;
              font-family: sans-serif;
              line-height: 1.15;
              -ms-text-size-adjust: 100%;
              -ms-overflow-style: scrollbar;
              -webkit-tap-highlight-color: transparent;
            }
      
            body {
              background-color: #eeeeee;
              color: #000;
              font-size: 1.6rem;
              font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
              line-height: 1.4;
            }
      
            *,
            *:before,
            *:after {
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
            }
      
            ::-moz-selection {
              background-color: rgba(17, 127, 253, 0.4);
              text-shadow: none;
            }
      
            ::selection {
              background-color: rgba(17, 127, 253, 0.4);
              text-shadow: none;
            }
      
            svg:not(:root) {
              overflow: hidden;
            }
      
            a {
              color: #039be5;
              text-decoration: none;
              -webkit-text-decoration-skip: objects;
            }
      
            .wrapper {
              background-color: #fff;
              max-width: 1000px;
              margin: 0 auto;
              padding: 30px;
              width: 100%;
            }
      
            .grid {
              margin-bottom: 30px;
            }
      
            .grid__items {
              display: flex;
              flex-wrap: wrap;
            }
            .grid__item {
              padding: 2px;
            }
      
            .seat {
              background-color: #000;
              display: block;
              height: 20px;
              width: 20px;
            }
            .seat.locked {
              background-color: red;
            }
            .seat.green {
              background-color: green;
            }
            .seat.yellow {
              background-color: yellow;
            }
          </style>
        </head>
        <body>
          <div class="wrapper">
            <amp-list height="900" items="." src="https://alexkazakov.info/layout/amp4email-test-multiselector/data.json">
              <template type="amp-mustache"
                >{{#passengers}}
                <div class="grid">
                  <amp-selector layout="container">
                    <div class="grid__items">
                      {{#seats}}
                      <div class="grid__item"><span class="seat {{ class }}" role="listitem" tabindex="0" option="{{ value }}"></span></div>
                      {{/seats}}
                    </div>
                  </amp-selector>
                </div>
                {{/passengers}}
              </template>
            </amp-list>
          </div>
        </body>
      </html>

You can see an example of this code here: https://alexkazakov.info/layout/amp4email-test-multiselector/
Data is taken from here: https://alexkazakov.info/layout/amp4email-test-multiselector/data.json

2). The code works perfectly. It also works great in gmail(I send via sparkpost).

chrome_2019-07-22_16-46-13

But if I add one passenger and the amp-selector becomes seven blocks, then gmail stops displaying.

For example, if you take the data(there is one passenger more): https://alexkazakov.info/layout/amp4email-test-multiselector/data-7.json gmail is no longer displayed:

chrome_2019-07-22_16-48-48

Errors appear in the console:

v0.js:142 Error proxying amp-list templates: Request viewerRenderTemplate failed: Error: Class$obf_1011: Hwa​​​
Uncaught (in promise) Error: Class$obf_1011: Hwa

Conclusion
In my example above, if I add more than six amp-selector inside the amp-list, then gmail stops displaying. If it's six or less, it works.

In my other code, only three amp-selectors are displayed in gmail, and if they are larger, they are no longer displayed.

When I test locally, any version works well, and all versions are valid.

I can't figure out what caused this error.

What browsers are affected?

Chrome

Which AMP version is affected?

Version 1907152257550

@alabiaga alabiaga self-assigned this Jul 22, 2019

@alabiaga

This comment has been minimized.

Copy link
Contributor

commented Jul 31, 2019

Alexandr, I was at some point able to reproduce this using your end point yesterday but have not been able to do so today because perhaps you are making changes. But I suspect this to be the issue with the constraint in place for the size limit set on the json payload. A 200K limit on the raw HTML, 300K after sanitization. I will confirm locally and just copy the json you sent.

@alexandr-kazakov

This comment has been minimized.

Copy link
Author

commented Aug 1, 2019

Thank you alabiaga for your reply.

I haven't made any edits to that code since this topic was created. I have specially prepared this example for this topic.


Here I have prepared a second example for seven passengers: https://alexkazakov.info/layout/amp4email-test-multiselector-2/
It works locally, but Gmail doesn't show colored blocks.

When I take this json for this email: https://alexkazakov.info/layout/amp4email-test-multiselector-2/data.json (6 passengers and 6 rows of colored blocks) then Gmail displays everything. And if I take this json in the same email: https://alexkazakov.info/layout/amp4email-test-multiselector-2/data-7.json (7 passengers and 7 rows of colored blocks) then Gmail amp-email opens, but the colored blocks are not displayed.

Locally when I test is always displayed, need to send to gmail(I send via sparkpost). Need to test in gmail.


  • I should note that I once exceeded the limit on the total weight of amp-email("The entire AMPHTML markup must not exceed 102,400 bytes.") and then my amp version didn't open in gmail at all, but the html version of email opened.
    In my example, amp-email opens correctly in gmail, but these colored blocks are not displayed.

Maybe this is really a limitation in json, but the documentation from the AMP there's nothing about it where about it can be found?

I have already solved my problem in another way. But I still wonder why this is happening. I just checked, the error persists. The original example I haven't and I've made a second example.

@alabiaga

This comment has been minimized.

Copy link
Contributor

commented Aug 2, 2019

@alexandr-kazakov

Maybe this is really a limitation in json, but the documentation from the AMP there's nothing about it where about it can be found?

Right, this is actually an action item for the working group to be discussed, determined, and set in the spec/documented. Thanks for bringing this up.

I will investigate this again on Monday. Apologies for the delay.

@alabiaga

This comment has been minimized.

Copy link
Contributor

commented Aug 13, 2019

@alexandr-kazakov

Apologies for the delayed update but as suspected this is related to the restrictions mentioned. We are in the process of increasing the cap size as well as improving the error message propagated to the user. Thanks

@alabiaga

This comment has been minimized.

Copy link
Contributor

commented Aug 13, 2019

cc\ @GoTcWang

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.