光标未对准iOS(WebKit)

Question

我在单击"计划会议"后在移动网站上打开一个表单。表单的代码很简单：（下面列出）。一切都按预期工作，但是当我在移动野生动物园上并使用自动填充触点功能时，它会完全向我的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>

Answer 1

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

Answer 2

这是由于webkit模式销售bug https://bugs.webkit.org/show_bug.cgi?id=176896，最终在iOS 11.3 Beta 2

中解决