### 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.

```html

body {
visibility: hidden
}

.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 } }

```

### 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

```shell
None
```

### Browser(s) Affected

_No response_

### OS(s) Affected

IOS

### Device(s) Affected

iPhone 14 pro max

### AMP Version Affected

012307212240000

Start by reproducing the provided AMP for Email template in a mobile view and inspect the form field focus and scrolling behavior. Done means clicking a field keeps it focused and does not unexpectedly scroll the page; the issue does not mention a repository file or test to run.

Written by the indexing model from the issue text.