search

scottjehl / Device-Bugs

Just a collection of quirks and issues that occur on browser platforms (particularly those unlikely to update)
863 stars 19 forks source link

-webkit-overflow-scrolling :touch modal show under black screen in Ipad #77

Open MohammedMubeen opened 5 years ago

MohammedMubeen commented 5 years ago

Hi Folks,

Ipad chrome browser I used, modal show under black screen. Please help me. the website chrome browser is working fine Issue occur when I add -webkit-overflow-scrolling :touch

NOTE: I used bootstrap 4, jquery version 3.3.1

<head>

<style>
#example{
  position: absolute;
  top:61px;
  bottom: 0; left: 0; right: 0;
  padding-left:15px;
  padding-right:15px;
  overflow-y: scroll;
  overflow-x: hidden; 
 -webkit-overflow-scrolling :touch
}
</style>
</head>

<body>
<div id="example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <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..
      </div>

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

    </div>
  </div>
</div>
</div>
</body>
MohammedMubeen commented 5 years ago

body tag inside without div, I applied the same style to the body it's working in iPad.

body{
  position: absolute;
  top:61px;
  bottom: 0; left: 0; right: 0;
  padding-left:15px;
  padding-right:15px;
  overflow-y: scroll;
  overflow-x: hidden; 
 -webkit-overflow-scrolling :touch
}

$(".Modal").appendTo("body"); Its solve the issues, but I don't want this approach.

Please help me. CSS its self how to solve that issues.