if bootstrap4 modals located low on the page, when tap on input field inside the modal, it scrolls to the bottom (chrome android)

问题

Please have a look at this issue. I have full one-page simple html code to reproduce it. There are two modals - one on top, and one lower on the page. Input fields inside the modals. If you tap on input field, it scrolls to the very bottom so that I cannot see the input field. This issue occurs only with the bottom modal, not the top one. Using CHROME on ANDROID

Here's the code:

  
<!doctype html>
<html lang="en">
<head>
	 
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Hello, world!</title>
    
    
    
</head>

<body>
      <h4>Hey</h4>
    
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal1">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
           <p>input</p>
        <input type="text">
          <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
    </div>
    <div style="height:1000px;"></div>
    <div style="height:1000px;"></div>
    
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal2">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
        <p>input</p>
        <input type="text">
          <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
    </div>


    
    
     <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 
  </body>
</html>

来源：https://stackoverflow.com/questions/59007108/if-bootstrap4-modals-located-low-on-the-page-when-tap-on-input-field-inside-the

标签

javascript

jquery

twitter-bootstrap

bootstrap-4

bootstrap-modal