Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
MohammedMubeen opened this issue Nov 13, 2018 · 1 comment
Open

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

MohammedMubeen opened this issue Nov 13, 2018 · 1 comment

Comments

@MohammedMubeen
Copy link

MohammedMubeen commented Nov 13, 2018 •
edited

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 MohammedMubeen changed the title Ipad body inside div -webkit-overflow-scrolling :touch using modal show under black screen -webkit-overflow-scrolling :touch using modal show under black screen in Ipad Nov 13, 2018
@MohammedMubeen MohammedMubeen changed the title -webkit-overflow-scrolling :touch using modal show under black screen in Ipad -webkit-overflow-scrolling :touch modal show under black screen in Ipad Nov 13, 2018
@MohammedMubeen
Copy link
Author

MohammedMubeen commented Nov 13, 2018 •
edited

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@MohammedMubeen