iOS 11 Safari bootstrap modal text area outside of cursor

Question

With iOS 11 safari, input textbox cursor are outside of input textbox. We did not get why it is having this problem. As you can see my focused text box is email text input b

Answer 1

Add position: fixed; to body when modal is open.

$(document).ready(function($){
    $("#myBtn").click(function(){
        $("#myModal").modal("show");
    });
    $("#myModal").on('show.bs.modal', function () {
        $('body').addClass('body-fixed');
    });
    $("#myModal").on('hide.bs.modal', function () {
        $('body').removeClass('body-fixed');
    });
});

.body-fixed {
    position: fixed;
    width: 100%;
}

Open Modal



	

		

			

				×
				
Form
			
			

				

					Input #1
					
				
				

					Input #2
					
				
				

					Input #3
					
				
				

					Input #4
					
				
			
			

				Close