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.

Sign up for GitHub

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

Jump to bottom

Form field goes out of focus as soon as I click on it #39330

Open
parikshit223933 opened this issue Aug 2, 2023 · 3 comments
Open

Form field goes out of focus as soon as I click on it #39330

parikshit223933 opened this issue Aug 2, 2023 · 3 comments
Labels
Customer: Email P2: Soon Platform: iOS Type: Bug WG: amp4email

Comments

@parikshit223933
Copy link

Description

I have created a amp html for email. When I click on one of the fields, it automatically scrolls up. It is happening only in mobile view though.

Here is the template where this issue can be clearly seen.

<!doctype html>
<html ⚡4email lang="en" data-css-strict>
<head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.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-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
    <style amp4email-boilerplate>body {
        visibility: hidden
    }</style>
    <style amp-custom>
        .es-button-border:hover a.es-button, .es-button-border:hover button.es-button {
            background:#56D66B;
        }
        body {
            width:100%;
            font-family:arial, "helvetica neue", helvetica, sans-serif;
        }
        table {
            border-collapse:collapse;
            border-spacing:0px;
        }
        table td, body, .es-wrapper {
            padding:0;
            Margin:0;
        }
        .es-header {
            table-layout:fixed;
            width:100%;
        }
        p, hr {
            Margin:0;
        }
        h1, h2, h3, h4, h5 {
            Margin:0;
            line-height:120%;
            font-family:arial, "helvetica neue", helvetica, sans-serif;
        }
        .es-p10t {
            padding-top:10px;
        }
        .es-p10b {
            padding-bottom:10px;
        }
        .es-p10r {
            padding-right:10px;
        }
        .es-p20t {
            padding-top:20px;
        }
        .es-p20b {
            padding-bottom:20px;
        }
        .es-p20l {
            padding-left:20px;
        }
        .es-p20r {
            padding-right:20px;
        }
        .es-menu td {
            border:0;
        }
        s {
            text-decoration:line-through;
        }
        p, ul li, ol li {
            font-family:arial, "helvetica neue", helvetica, sans-serif;
            line-height:150%;
        }
        ul li, ol li {
            Margin-bottom:15px;
            margin-left:0;
        }
        a {
            text-decoration:underline;
        }
        .es-menu td a {
            text-decoration:none;
            display:block;
            font-family:arial, "helvetica neue", helvetica, sans-serif;
        }
        .es-menu amp-img, .es-button amp-img {
            vertical-align:middle;
        }
        .es-wrapper {
            width:100%;
            height:100%;
        }
        .es-wrapper-color, .es-wrapper {
            background-color:#F6F6F6;
        }
        .es-header {
            background-color:transparent;
        }
        .es-header-body {
            background-color:#FFFFFF;
        }
        .es-header-body p, .es-header-body ul li, .es-header-body ol li {
            color:#333333;
            font-size:14px;
        }
        .es-header-body a {
            color:#2CB543;
            font-size:14px;
        }

        .es-content-body p, .es-content-body ul li, .es-content-body ol li {
            color:#333333;
            font-size:14px;
        }
        .es-content-body a {
            color:#2CB543;
            font-size:14px;
        }

        .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li {
            color:#333333;
            font-size:14px;
        }
        .es-footer-body a {
            color:#FFFFFF;
            font-size:14px;
        }
      .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li {
            line-height:120%;
            font-size:12px;
            color:#CCCCCC;
        }
        .es-infoblock a {
            font-size:12px;
            color:#CCCCCC;
        }
        h1 {
            font-size:30px;
            font-style:normal;
            font-weight:normal;
            color:#333333;
        }
        h2 {
            font-size:24px;
            font-style:normal;
            font-weight:normal;
            color:#333333;
        }
        h3 {
            font-size:20px;
            font-style:normal;
            font-weight:normal;
            color:#333333;
        }
        .es-header-body h1 a, .es-content-body h1 a, .es-footer-body h1 a {
            font-size:30px;
        }
        .es-header-body h2 a, .es-content-body h2 a, .es-footer-body h2 a {
            font-size:24px;
        }
        .es-header-body h3 a, .es-content-body h3 a, .es-footer-body h3 a {
            font-size:20px;
        }
        a.es-button, button.es-button {
            display:inline-block;
            background:#31CB4B;
            border-radius:30px;
            font-size:18px;
            font-family:arial, "helvetica neue", helvetica, sans-serif;
            font-weight:normal;
            font-style:normal;
            line-height:120%;
            color:#FFFFFF;
            text-decoration:none;
            width:auto;
            text-align:center;
            padding:10px 20px 10px 20px;
        }

        form {
            width: inherit;
        }

        .form-group {
            margin-bottom: 20px;
            margin-top: 20px;
            box-sizing: border-box;
            width: 100%;
        }

        .label {
            text-align: left;
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
            font-family: 'Mulish';
            font-style: normal;
            font-weight: 500;
            font-size: 12px;
            line-height: 16px;
        }

        .input-field {
            width: 100%;
            padding: 14px;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-sizing: border-box;
            font-size: 14px;
            outline: none;
        }

        .submit-btn {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #FB813E;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 12px 0;
            cursor: pointer;
            font-family: 'Mulish';
            font-style: normal;
            font-weight: 700;
            font-size: 18px;
            line-height: 24px;
        }

        .option-selector {
            color: white;
            font-size: 40px;
            width: 16px;
            height: 16px;
            margin: .5rem;
            border-radius: 100%;
            border: solid 1px #000000;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        .option-wrapper{
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;

        }

        .option-wrapper[selected] > .option-selector {
            color: black;
            outline-color: #000000;
        }
        .hide-on-submit[submit-success],
        .hide-on-submit[submit-error] {
            display: none;
        }
        amp-selector [option][selected] {
            outline: none;
        }
        .webinar-heading{
            font-family: 'Mulish';
            font-style: normal;
            font-weight: 700;
            font-size: 24px;
            line-height: 32px;
            text-align: center;
            margin: 36px 0;
        }
        .message{
            margin: 20px 0;
            font-size: 20px;
            line-height: 28px;
            font-weight: 700;
        }
        .highlighted-label {
            font-size: 16px;
            font-weight: bold;
        }
        body {
            font-family:arial, "helvetica neue", helvetica, sans-serif;
        }
        @media only screen and (max-width:600px) {p, ul li, ol li, a { line-height:150% } h1, h2, h3, h1 a, h2 a, h3 a { line-height:120% } h1 { font-size:30px; text-align:left } h2 { font-size:24px; text-align:left } h3 { font-size:20px; text-align:left } .es-header-body h1 a, .es-content-body h1 a, .es-footer-body h1 a { font-size:30px; text-align:left } .es-header-body h2 a, .es-content-body h2 a, .es-footer-body h2 a { font-size:24px; text-align:left } .es-header-body h3 a, .es-content-body h3 a, .es-footer-body h3 a { font-size:20px; text-align:left } .es-menu td a { font-size:14px } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size:14px } .es-content-body p, .es-content-body ul li, .es-content-body ol li, .es-content-body a { font-size:14px } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:14px } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:12px } *[class="gmail-fix"] { display:none } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left } .es-m-txt-r amp-img { float:right } .es-m-txt-c amp-img { margin:0 auto } .es-m-txt-l amp-img { float:left } .es-button-border { display:inline-block } a.es-button, button.es-button { font-size:18px; display:inline-block } .es-adaptive table, .es-left, .es-right { width:100% } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%; max-width:600px } .es-adapt-td { display:block; width:100% } .adapt-img { width:100%; height:auto } td.es-m-p0 { padding:0px } td.es-m-p0r { padding-right:0px } td.es-m-p0l { padding-left:0px } td.es-m-p0t { padding-top:0px } td.es-m-p0b { padding-bottom:0 } td.es-m-p20b { padding-bottom:20px } .es-mobile-hidden, .es-hidden { display:none } tr.es-desk-hidden, td.es-desk-hidden, table.es-desk-hidden { width:auto; overflow:visible; float:none; max-height:inherit; line-height:inherit } tr.es-desk-hidden { display:table-row } table.es-desk-hidden { display:table } td.es-desk-menu-hidden { display:table-cell } .es-menu td { width:1% } table.es-table-not-adapt, .esd-block-html table { width:auto } table.es-social { display:inline-block } table.es-social td { display:inline-block } .es-desk-hidden { display:table-row; width:auto; overflow:visible; max-height:inherit } }
    </style>
</head>
<body data-new-gr-c-s-loaded="14.1112.0">
<div class="es-wrapper-color">
    <table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0">
        <tr>
            <td valign="top">
                <table class="es-header es-visible-amp-html-only" cellspacing="0" cellpadding="0" align="center">
                    <tr>
                        <td class="es-stripe-amp" align="center">
                            <table class="es-header-body" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center">
                                <tr>
                                    <td class="es-p20t es-p20r es-p20l" align="left">
                                        <table width="100%" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td width="560" valign="top" align="center">
                                                    <table width="100%" cellspacing="0" cellpadding="0" role="presentation">
                                                        <tr>
                                                            <td align="center" style="font-size: 0px">
                                                                <amp-img class="adapt-img" src="https://qcstna.stripocdn.email/content/guids/CABINET_f58a0e3925cdf62447ed53d163c9122e6a0556c5db5446679f68030850389edb/images/1_2.png" alt style="display: block" width="560" height="546" layout="responsive"></amp-img>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td align="center" style="font-size: 0px">
                                                                <amp-img class="adapt-img" src="https://qcstna.stripocdn.email/content/guids/CABINET_f58a0e3925cdf62447ed53d163c9122e6a0556c5db5446679f68030850389edb/images/1_3.png" alt style="display: block" width="560" height="727" layout="responsive"></amp-img>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td align="center" style="font-size: 0px">
                                                                <amp-img class="adapt-img" src="https://qcstna.stripocdn.email/content/guids/CABINET_f58a0e3925cdf62447ed53d163c9122e6a0556c5db5446679f68030850389edb/images/1_3.png" alt style="display: block" width="560" height="727" layout="responsive"></amp-img>
                                                            </td>
                                                        </tr>
                                                        <!--TECH TEAM TO ADD FORM'S AMP CODE HERE-->
                                                        <tr>
                                                            <td>
                                                                <template type="amp-mustache" id="submit_success_template">
                                                                    Success! You have successfully registered for the webinar
                                                                </template>
                                                                <template type="amp-mustache" id="submit_error_template">
                                                                    Oops! error occurred!!!
                                                                </template>
                                                                <h1 class="webinar-heading" id ="webinar-heading">
                                                                    Sign up for a free webinar
                                                                </h1>
                                                                <form id="form" method="post" action-xhr="https://www.google.com">
                                                                    <div class="form-group" id="fg-1">
                                                                        <label class="label highlighted-label" for="email">Email</label>
                                                                        <input type="email" id="email" class="input-field" name="Email" placeholder="Enter your email" required>
                                                                    </div>
                                                                    <div class="form-group" id="fg-2">
                                                                        <label class="label highlighted-label" for="phone">Phone number</label>
                                                                        <input type="tel" id="phone" class="input-field" name="phone_number" placeholder="Enter your phone number" required>
                                                                    </div>
                                                                    <button id="fg-4" type="submit" class="submit-btn" on="tap: webinar-heading.hide">Submit</button>
                                                                    <div class="message" submit-success template="submit_success_template"></div>
                                                                    <div class="message" submit-error template="submit_error_template"></div>
                                                                </form>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td align="center" class="es-p10t es-p10b" style="font-size:0">
                                                                <table cellpadding="0" cellspacing="0" class="es-table-not-adapt es-social" role="presentation">
                                                                    <tr>
                                                                        <td align="center" valign="top" class="es-p10r"><a target="_blank" href="https://www.youtube.com/c/CodingNinjasIndia?utm_source=webengage">
                                                                            <amp-img src="https://qcstna.stripocdn.email/content/assets/img/social-icons/square-black/youtube-square-black.png" alt="Yt" title="Youtube" width="32" height="32"></amp-img>
                                                                        </a></td>
                                                                        <td align="center" valign="top" class="es-p10r"><a target="_blank" href="https://www.instagram.com/coding.ninjas?utm_source=webengage">
                                                                            <amp-img src="https://qcstna.stripocdn.email/content/assets/img/social-icons/square-black/instagram-square-black.png" alt="Ig" title="Instagram" width="32" height="32"></amp-img>
                                                                        </a></td>
                                                                        <td align="center" valign="top" class="es-p10r"><a target="_blank" href="https://www.linkedin.com/company/codingninjas?utm_source=webengage">
                                                                            <amp-img src="https://qcstna.stripocdn.email/content/assets/img/social-icons/square-black/linkedin-square-black.png" alt="In" title="Linkedin" width="32" height="32"></amp-img>
                                                                        </a></td>
                                                                        <td align="center" valign="top"><a target="_blank" href="https://www.facebook.com/codingninjas?utm_source=webengage">
                                                                            <amp-img src="https://qcstna.stripocdn.email/content/assets/img/social-icons/square-black/facebook-square-black.png" alt="Fb" title="Facebook" width="32" height="32"></amp-img>
                                                                        </a></td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td align="center">
                                                                {% raw %}
                                                                <p style="color: #000000;font-family: helvetica, &quot;helvetica neue&quot;, arial, verdana, sans-serif">If you want to unsubscribe, please click <a target="_blank"
                                                                                                                                                                                                                     style="color: #0000ff;font-family: helvetica, 'helvetica neue', arial, verdana, sans-serif">here</a>.</p>
                                                                {% endraw %}
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

Reproduction Steps

  1. Copy code from above
  2. Go to amp.gmail.dev
  3. Paste the code there and send it to your email
  4. Open the email in mobile view
  5. Scroll down and click on any of the form fields. It will automatically scroll up because of which form field will not remain in view.

Relevant Logs

None

Browser(s) Affected

No response

OS(s) Affected

IOS

Device(s) Affected

iPhone 14 pro max

AMP Version Affected

012307212240000
@ychsieh
Copy link
Contributor

ychsieh commented Jan 22, 2024

I have tested on multiple emails and this issue only happens on iOS Gmail.

@dkjonzy2
Copy link

dkjonzy2 commented Feb 8, 2024

@ychsieh Is there a work around for iOS Gmail? I'm happy to look into a patch if not.

I've also found that it only happens an later versions of iOS, older iphone models don't have the issue

@quetzalcaotl
Copy link

Just commenting to +1 on this issue. I have seen this appear on a few email campaigns I've worked on where the focus behaves unexpectedly for form inputs on iOS and scrolls to the top of the email instead of staying in place. The only real workaround from a dev perspective is to hide the interactive form (via CSS targeting) and replace it with something else, which is not ideal. If someone has an idea of how to fix this it would be greatly appreciated, as iOS is >50% of the mobile market in the US.

At the very least it would be nice to know if this is an AMP4Email-specific issue, or a gmail implementation of AMP4Email-specific issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Customer: Email P2: Soon Platform: iOS Type: Bug WG: amp4email
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@erwinmombay @ychsieh @quetzalcaotl @parikshit223933 @dkjonzy2