游标未与iOS输入（webkit）对齐

问题描述：

我在我的移动websitet上有一个窗体，在您单击“安排会议”后打开。表单的代码很简单：（下面列出）。一切都按预期工作，但是当我使用移动Safari浏览器并使用自动填充联系人功能时，它会将我的nextButton的可点击区域完全移到上方并与其背景分开。这里有什么线索？游标未与iOS输入（webkit）对齐

function meetingSchedulerStepNameVerify() 
 
{ 
 
    if(document.getElementById('meetingSchedulerInputFirstName').value != '' && document.getElementById('meetingSchedulerInputLastName').value != '') 
 
    { 
 
     document.getElementById('meetingSchedulerStepNameNextButton').style.backgroundColor = '#5efb7c'; 
 
     return true; 
 
    } 
 
    
 
} 
 
function meetingSchedulerStepNameNextButtonPressed() 
 
{ 
 
    if(document.getElementById('meetingSchedulerInputFirstName').value != '' && document.getElementById('meetingSchedulerInputLastName').value != '')if (document.getElementById('meetingSchedulerStepNameNextButton').style.backgroundColor == 'rgb(94, 251, 124)') 
 
    { 
 
     alert('yes'); 
 
     document.getElementById('meetingSchedulerStepName').style.display = 'none'; 
 
     document.getElementById('meetingSchedulerStepAddress').style.display = 'block'; 
 
     document.getElementById('meetingSchedulerStepAddressPromptName').innerHTML = document.getElementById('meetingSchedulerInputFirstName').value; 
 
    } 
 
    else 
 
    { 
 
     alert(document.getElementById('meetingSchedulerStepNameNextButton').style.backgroundColor); 
 
    } 
 
}

#meetingSchedulerStepAddress 
 
      { 
 
       display:none; 
 
       width:100%; 
 
       text-align:center; 
 
      } 
 
       #meetingSchedulerStepAddressPrompt 
 
       { 
 
        width:100%; 
 
        font-size:4.5em; 
 
        font-family:Roboto; 
 
        padding-top:.5em; 
 
        padding-bottom:.5em; 
 
        background-color:#ffbd4b; 
 
        border-radius:2vw; 
 
        -webkit-border-radius:2vw; 
 
        -moz-border-radius:2vw; 
 
       } 
 
       #meetingSchedulerStepAddressInputWrapper 
 
       { 
 
        margin-top:5em; 
 
       } 
 
       .meetingSchedulerStepAddressLine 
 
       { 
 
        display:flex; 
 
        width:100%; 
 
       } 
 
        #meetingSchedulerStepAddressInputLine1 
 
        { 
 
         width:100%; 
 
        } 
 
        
 
        #meetingSchedulerStepAddressInputCity 
 
        { 
 
         width:100%; 
 
        } 
 
        #meetingSchedulerStepAddressInputState 
 
        { 
 
         width:50%; 
 
        } 
 
        #meetingSchedulerStepAddressInputZipcode 
 
        { 
 
         width:50%; 
 
        } 
 
       .meetingSchedulerStepAddressInput 
 
       { 
 
        font-size:4em; 
 
        font-family:Roboto; 
 
        text-align:center; 
 
        border:0; 
 
        -webkit-appearance: none; 
 
       } 
 
       #meetingSchedulerStepAddressTransitionWrapper 
 
       { 
 
        margin:0 auto; 
 
        margin-top:10em; 
 
        width:50em; 
 
        height:10em; 
 
       } 
 
        #meetingSchedulerStepAddressBackButton 
 
        { 
 
         height:10em; 
 
         width:15em; 
 
         background-color:red; 
 
         float:left; 
 
         background-image:url(../../../images/home/mobile/meetingSchedulerBackButton.png); 
 
         background-position:center; 
 
         background-size:6em 6em; 
 
         background-repeat:no-repeat; 
 
         border-radius:3vw; 
 
         -webkit-border-radius:3vw; 
 
         -moz-border-radius:3vw; 
 
        
 
        } 
 
        #meetingSchedulerStepAddressNextButton 
 
        { 
 
         width:30em; 
 
         height:10em; 
 
         background-color:lightgray; 
 
         float:right; 
 
         border-radius:3vw; 
 
         -webkit-border-radius:3vw; 
 
         -moz-border-radius:3vw; 
 
        } 
 
         #meetingSchedulerStepAddressNextButtonText 
 
         { 
 
          font-family:Roboto; 
 
          font-size:6em; 
 
          padding-top:.1em; 
 
         }

<div id="meetingSchedulerStepAddressInputWrapper"> 
 
         <div class="meetingSchedulerStepAddressLine"> 
 
          <input id="meetingSchedulerStepAddressInputLine1" class="meetingSchedulerStepAddressInput" name="address-line1" placeholder="555 Street Name"/> 
 
         </div> 
 
         <div class="meetingSchedulerStepAddressLine"> 
 
         <input id="meetingSchedulerStepAddressInputCity" class="meetingSchedulerStepAddressInput" name="address-level2" placeholder="City"/> 
 
         </div> 
 
         <div class="meetingSchedulerStepAddressLine"> 
 
          <input id="meetingSchedulerStepAddressInputState" class="meetingSchedulerStepAddressInput" name="address-level1" value="NJ" placeholder="ST"/> 
 
          <input id="meetingSchedulerStepAddressInputZipcode" class="meetingSchedulerStepAddressInput" name="postal-code" type="number" value="08008" placeholder="Zipcode"/> 
 
         </div> 
 
        </div> 
 
        <div id="meetingSchedulerStepAddressTransitionWrapper"> 
 
         <div id="meetingSchedulerStepAddressBackButton"></div> 
 
         <div id="meetingSchedulerStepAddressNextButton"><div id="meetingSchedulerStepAddressNextButtonText">next</div></div> 
 
        </div>

事实上终于解决了，的onclick错位与所有div并不仅仅是Next按钮。 – AlexHeuman

答

这是由于WebKit的模式插入符号错误https://bugs.webkit.org/show_bug.cgi?id=176896和iOS的11.3 beta 2版本

答

我不知道是什么原因导致这个错误，但我通过调用document.getElementById('meetingSchedulerStepNameNextButton').scrollIntoView();缓解症状和解决的问题。

游标未与iOS输入（webkit）对齐

相关推荐