Design issue with the bootstrap based form in iphone browser - html

Question

I have a blog page where user can post comments, comment form shows up as a bootstrap modal when user click on a link or button.
This website is designed in asp.net webform just in case information is helpful
Since i cant put all the code i have just put related code of the page with css & JS.
This form works fine on Desktop browser and also on samsung browser but same breaks on iphone.
Form has multiple fields for input Name, Email, Country, Comments etc
When i start to enter Name cursor show below the Name inputbox and when i enter email cursor show almost two row below the email input feild..
I am adding screen for reference and also Codepen link
1[]2
I am not sure why it is breaking as i am not able to debut it in Iphone
<div class="modal fade in" id="commentModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block;" aria-hidden="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Comment</h4>
</div>
<div class="modal-body">
<!--- UpdatePanel -->
<div id="MainContent_UpdatePanel1">
<!--- Code -HERE -->
<div id="MainContent_pnlForm">
<div class="comment-intro-w">
<span id="MainContent_lblCommentMsg" class="txtLabelComment">All fields are mandatory.</span>
</div>
<div data-val-validationgroup="vgCommentForm" id="MainContent_vsCommentForm" class="validation-sum" data-valsummary="true" style="display:none;">
</div>
<div class="comment-fullname-w">
<input name="ctl00$MainContent$txtCommentFullName" id="MainContent_txtCommentFullName" tabindex="1" class="txt-comment-fn" placeholder="Full Name" type="text">
<span data-val-controltovalidate="MainContent_txtCommentFullName" data-val-errormessage="Name can't be blank" data-val-validationgroup="vgCommentForm" id="MainContent_rfv1" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
data-val-initialvalue="" style="visibility:hidden;">Name can't be blank</span>
</div>
<div class="comment-email-w">
<input name="ctl00$MainContent$txtCommentEmail" id="MainContent_txtCommentEmail" tabindex="1" class="txt-comment-fn" placeholder="Email" type="text">
<span data-val-controltovalidate="MainContent_txtCommentEmail" data-val-errormessage="Email can't be blank" data-val-validationgroup="vgCommentForm" id="MainContent_rfvEmail" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
data-val-initialvalue="" style="visibility:hidden;">Email can't be blank</span>
<span data-val-controltovalidate="MainContent_txtCommentEmail" data-val-errormessage="Enter correct email" data-val-validationgroup="vgCommentForm" id="MainContent_revEmail" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid"
data-val-validationexpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" style="visibility:hidden;">Enter correct email</span>
</div>
<div class="comment-country-w">
<select name="ctl00$MainContent$ddCountry" id="MainContent_ddCountry" tabindex="3" class="dd-comment-country">
<option value="">Country</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
</select>
<span data-val-controltovalidate="MainContent_ddCountry" data-val-errormessage="Select Country" data-val-validationgroup="vgCommentForm" id="MainContent_rfvddC" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
data-val-initialvalue="" style="visibility:hidden;">Select Country</span>
</div>
<div class="comment-message-w">
<textarea name="ctl00$MainContent$txtCommentMessage" rows="5" cols="20" id="MainContent_txtCommentMessage" tabindex="4" class="txt-comment-msg" placeholder="Message"></textarea>
<span data-val-controltovalidate="MainContent_txtCommentMessage" data-val-errormessage="Message can't be blank" data-val-validationgroup="vgCommentForm" id="MainContent_rfvmsg" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
data-val-initialvalue="" style="visibility:hidden;">Message can't be blank</span>
</div>
<div class="comment-anonymous-w">
<span class="chk-anonymous"><input id="MainContent_cbAnonymous" name="ctl00$MainContent$cbAnonymous" type="checkbox"><label for="MainContent_cbAnonymous">I wish to be anonymous. Do not publish my name with my comment.</label></span>
</div>
<div class="comment-btnsave-w">
<input name="ctl00$MainContent$btnSaveComments" value="Post Comment" onclick="ClientSideClick(this);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$btnSaveComments", "", true, "vgCommentForm", "", false, true))"
id="MainContent_btnSaveComments" class="buttonPopups" type="button">
</div>
</div>
<!--- Code -HERE -->
</div>
<!--- UpdatePanel -->
</div>
</div>
</div>
</div>

Answer 1

I found the solution it seems to work .modal-open { position: fixed; width: 100%; }
It seems like a bug in iOS. Any other solution is welcome
Personally, position: fixed scroll to top automatically. Quite annoying !
To avoid penalizing other devices and versions I apply this fix only to the appropriate versions of iOS.
For the javascript/jQuery
$(document).ready(function() {
// Detect ios 11_0_x affected
// NEED TO BE UPDATED if new versions are affected
var ua = navigator.userAgent,
iOS = /iPad|iPhone|iPod/.test(ua),
iOS11 = /OS 11_0_1|OS 11_0_2|OS 11_0_3|OS 11_1/.test(ua);
// ios 11 bug caret position
if ( iOS && iOS11 ) {
// Add CSS class to body
$("body").addClass("iosBugFixCaret");
}
}
For the CSS
/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }
Reference Source iOS 11 Safari bootstrap modal text area outside of cursor