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: Confusing behavior when max email size exceeded in Gmail #23450

Closed
alexandr-kazakov opened this issue Jul 22, 2019 · 6 comments
Closed

Comments

@alexandr-kazakov
Copy link
Contributor

@alexandr-kazakov alexandr-kazakov 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
Copy link
Contributor

@alabiaga alabiaga 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.

Loading

@alexandr-kazakov
Copy link
Contributor Author

@alexandr-kazakov alexandr-kazakov 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.

Loading

@alabiaga
Copy link
Contributor

@alabiaga alabiaga 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.

Loading

@alabiaga
Copy link
Contributor

@alabiaga alabiaga 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

Loading

@alabiaga
Copy link
Contributor

@alabiaga alabiaga commented Aug 13, 2019

cc\ @GoTcWang

Loading

@choumx choumx changed the title AMP4EMAIL: multiple amp-selector inside amp-list AMP4EMAIL: Confusing behavior when max email size exceeded in Gmail Sep 18, 2019
@stale
Copy link

@stale stale bot commented Mar 12, 2021

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.

Loading

@stale stale bot added the Stale label Mar 12, 2021
@stale stale bot closed this Mar 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants