光标与 iOS（webkit）上的输入未对齐

Posted 2023-02-23

【中文标题】光标与 iOS（webkit）上的输入未对齐

【英文标题】：Cursor misaligned with input on iOS(webkit)

【发布时间】：2017-02-19 19:40:32

【问题描述】：

我的移动网站上有一个表格，在您点击“安排会议”后会打开。 表单的代码很简单：（如下所列）。一切都按预期工作，但是当我在移动 safari 上并使用自动填充联系人功能时，它会将我的 nextButton 的可点击区域完全移动到上方并与其背景分开。这里有什么线索吗？

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 不对齐，而不仅仅是下一个按钮。

【参考方案1】：

我不确定是什么导致了这个错误，但我通过调用document.getElementById('meetingSchedulerStepNameNextButton').scrollIntoView(); 缓解了症状并解决了问题。

【参考方案2】：

这是由于 webkit modal caret bug https://bugs.webkit.org/show_bug.cgi?id=176896 导致的，最终在 ios 11.3 beta 2 中得到解决