0
Ich habe eine Seite mit einem Formular im Rest des Inhalts.Auf mobilen, hängt/rutscht die Seite beim Bildlauf
Das Problem ist die Seite hängt/stottert, wenn ich durch das Formular auf dem Handy, insbesondere iOS scrollen. Es passiert, egal wo ich die Form in den Fluss des Inhalts platziere. Und zusätzlich zum Hängen "rutscht" die Seite nicht, wenn sie vertikal gewischt wird. Hier
ist der HTML-Code für das Formular ...
<div id="authform">
<div class="sectionhead">
<h1 class="blue">Do You Qualify to Use the Device</h1>
</div>
<form action="https://purchase-authorization.net/" method="post">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="float:right;text-align: right;font-size: 10px;">
<span class="req-symbol"> * </span> denotes required fields</td>
</tr>
<tr>
<td id="first_name" style="margin-right: 10px;">
<label for="first_name" id="first_name_label" class=""> First Name <span class='req-symbol'>
<strong> * </strong>
</span>
</label>
<input id="first_name" name="first_name" type="text" placeholder="" required />
</td>
<td id="last_name">
<label for="last_name" id="last_name_label" class=""> Last Name <span class='req-symbol'>
<strong> * </strong>
</span>
</label>
<input id="last_name" name="last_name" type="text" placeholder="" required />
</td>
</tr>
<tr>
<td id="email">
<label for="email" id="email_label" class=""> Email <span class='req-symbol'>
<strong> * </strong>
</span>
</label>
<input id="email" name="email" type="text" placeholder="" required />
</td>
</tr>
<tr>
<td class="full" id="implanted">
<label for="implanted" id="implanted_label" class=""> Do you have a medical device implanted in your head or neck? <span class='req-symbol'>
<strong> * </strong>
</span>
</label>
</td>
</tr>
<tr>
<td>
<label class="binary">
<input type="radio" name="implanted" value="Yes" />
<div class="tick">
</div>
<span>Yes</span>
</label>
</td>
<td>
<label class="binary">
<input type="radio" name="implanted" value="No" checked />
<div class="tick">
</div>
<span>No</span>
</label>
</td>
</tr>
<tr>
<td class="full" id="pacemaker">
<label for="pacemaker" id="pacemaker_label" class=""> Do you have a pacemaker? <span class='req-symbol'>
<strong> * </strong>
</span>
</label>
</td>
</tr>
<tr>
<td>
<label class="binary">
<input type="radio" name="pacemaker" value="Yes" />
<div class="tick">
</div>
<span>Yes</span>
</label>
</td>
<td>
<label class="binary">
<input type="radio" name="pacemaker" value="No" checked />
<div class="tick">
</div>
<span>No</span>
</label>
</td>
</tr>
<tr>
<td class="full" id="over_21">
<label for="over_21" id="over_21_label" class=""> Are you 21 years of age or older? <span class='req-symbol'>
<strong> * </strong>
</span>
</label>
</td>
</tr>
<tr>
<td>
<label class="binary">
<input type="radio" name="over_21" value="Yes" checked />
<div class="tick">
</div>
<span>Yes</span>
</label>
</td>
<td>
<label class="binary">
<input type="radio" name="over_21" value="No" />
<div class="tick">
</div>
<span>No</span>
</label>
</td>
</tr>
<tr>
<td class="full" id="updates">
<label for="updates" id="updates_label" class=""> May the manufacturer email you important device related updates? <span class='req-symbol'>
<strong> * </strong>
</span>
</label>
</td>
</tr>
<tr>
<td>
<label class="binary">
<input type="radio" name="updates" value="Yes" checked />
<div class="tick">
</div>
<span>Yes</span>
</label>
</td>
<td>
<label class="binary">
<input type="radio" name="updates" value="No" />
<div class="tick">
</div>
<span>No</span>
</label>
</td>
</tr>
<tr>
<td style="width: auto;">
<label>Confirm that you are not a bot <span class='req-symbol'>
<strong> * </strong>
</span>
</label>
</td>
</tr>
<tr>
<td class="full">
<input type="hidden" name="addauth">
<input type="submit" name="submit" id="submit" value="Submit">
</td>
</tr>
</table>
</form>
<br />
<br />
<br />
</div>
Und hier ist die CSS ...
div#authform {
background:#b6ebff;
}
div#authform #greenbar {
max-width: 760px;
margin: 0 auto;
padding: 50px 0 0 0;
color: #fff;
text-align: center;
height: 185px;
}
div#authform .site-title {
font-weight: 400;
font-size: 32px;
text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
margin-bottom: 10px !important;
}
div#authform .site-subhead {
font-weight: 100;
font-size: 25px;
text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}
div#authform .below-header {
background: #f3f3f3;
padding: 40px;
text-align: center;
}
div#authform .site-content {
width: 900px;
margin-top: 0;
box-shadow: 0 0 15px 5px rgba(0, 1, 1, 0.1);
margin: 0 auto;
padding: 20px;
background: #fff;
word-wrap: break-word;
}
div#authform form {
font-size: 15px;
font-weight: normal;
max-width: 500px;
margin: 0 auto;
}
div#authform label {
margin: 10px 0 10px 0;
}
div#authform span.req-symbol {
color: #ff0000;
}
div#authform input {
/*margin: 10px 0 20px 0;
padding: 0.625em 0.4375em;*/
padding: 0 0.4375em;
font-size: 1rem;
}
div#authform input, label.binary {
background-image: none;
border: none;
height: 70px;
-webkit-appearance: none;
display: block;
background: #e9f9ff;
}
div#authform label.binary {
text-align: center;
}
div#authform label.binary span {
position: absolute;
top: 40px;
}
div#authform input[type="radio"] {
visibility: hidden;
}
div#authform input#first_name, div#authform input#last_name {
width: 235px;
}
div#authform input#email {
width: 100%;
}
div#authform input#first_name, div#authform input#last_name, div#authform input#email {
margin-top: 15px;
}
div#authform #ninja_forms_field_2_div_wrap {
width: 100%;
max-width: 488px;
}
div#authform td {
margin-bottom: 20px;
width: 50%;
display: inline-block;
position: relative;
overflow: hidden;
/*max-width: 250px;*/
}
div#authform td.full {
width: 100%;
display: block;
margin-top: 0px;
margin-bottom: 0px;
}
div#authform td#last_name {
float:right;
width:48%;
}
div#authform td#last_name input {
/*border-left: 10px solid #b6ebff;*/
}
div#authform td#email {
width: 100%;
max-width: 500px;
}
div#authform td:nth-of-type(2n) {
float: right;
}
div#authform label input + div {
position: absolute;
top: 30%;
left: 25%;
width: 35px;
height: 35px;
background-image: url(https://cdn.shopify.com/s/files/1/0315/7737/t/2/assets/tick-circle.png?10653060167534890121);
}
div#authform label input:checked + div {
position: absolute;
top: 30%;
left: 25%;
width: 35px;
height: 35px;
background-image: url(https://cdn.shopify.com/s/files/1/0315/7737/t/2/assets/tick_green.png?14586621079243987983);
}
div#authform #submit {
background: #39b54a;
border: 0;
border-radius: 20px;
color: #fff;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
letter-spacing: 0.046875em;
line-height: 1;
padding: 0.84375em 0.875em 0.78125em;
text-transform: uppercase;
-webkit-appearance: button;
cursor: pointer;
width:100%;
height: 42px;
}
div#authform .below-header.pay {
padding: 40px 100px;
}
div#authform div#pa_button {
cursor: hand;
max-width: 500px;
width: 100%;
background-image: linear-gradient(#417194,#2c4c69);
border: 4px solid #ccc;
border-radius: 20px;
color: #fff;
text-align: center;
font-size: 24px;
line-height: 60px;
margin-bottom: 20px;
}
div#authform div#below_pa_button {
font-size: 12px;
max-width: 500px;
margin: 0 auto;
}
div#authform div#greenfooter {
height: 60px;
background: #54b761;
box-shadow: 0 0 15px 5px rgba(0, 1, 1, 0.1);
}
@media screen and (max-width: 600px) {
div#authform td#first_name, div#authform td#last_name {
width: 100% !important;
display: block;
float: left !important;
}
div#authform input#first_name, div#authform input#last_name {
width: 100% !important;
}
}
Ich habe versucht, die Form, bis alles andere Lasten versteckt mit Anzeige: keine bis window.load. Keine Hilfe. Ich habe sogar die Form HTML und CSS ohne Erfolg verkleinert.
This ist die Seite, wo Sie das Problem am unteren Rand der Seite sehen können.
Und here ist eine freistehende Seite, die lädt und scrollt fein mit im Grunde die gleiche Form und CSS.
Schätzen Sie alle Vorschläge!