[Modal] Scrolling should work after showing modals

searene commented 6 years ago

Steps

The following html does nothing but shows a modal. However, after that, scrolling doesn't work on mobile devices(although it works on desktop browsers).

Note that scrolling works on mobile devices after the following line is removed.

  $("#test-modal").modal("show");

So I think maybe modal did something that prevented scrolling on mobile devices.

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css">
  <script
      src="https://code.jquery.com/jquery-3.1.1.min.js"
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
      crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.js"></script>
</head>
<body>
<pre>
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
    contents
</pre>
<div class="ui basic modal" id="test-modal">
  <div class="ui header">
    header
  </div>
  <div class="content">
    <p>content</p>
  </div>
  <div class="actions">
    <div class="ui green ok inverted button">
      <i class="checkmark icon"></i>
      OK
    </div>
  </div>
</div>
<script>
  $("#test-modal").modal("show");
</script>
</body>
</html>