Cursor misaligned with input on iOS(webkit) - html

Question

I have a form on my mobile websitethat opens up after you click "schedule meeting".
The code for the form is simple:(listed below). Everything works as expected, but when when I'm on mobile safari and use the autofill contact function it moves the clickable area for my nextButton completely above and separate from it's background. Any clues here?
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

I'm not sure what causes this bug, but I alleviated the symptoms by calling document.getElementById('meetingSchedulerStepNameNextButton').scrollIntoView(); and that solved the problem.

Answer 2

This was due to the webkit modal caret bug https://bugs.webkit.org/show_bug.cgi?id=176896 and was finally resolved in iOS 11.3 beta 2