title: Twitter Bootstrap modal on mobile devices
body: <p>Bootstrap modals don't work correctly on Android and iOS.  The issue tracker acknowledges the problem but does not offer a working solution:</p>
  
  <p><a href="https://github.com/twitter/bootstrap/issues/3230" rel="nofollow noreferrer">Modals in 2.0 are broken on mobile.</a></p>
  
  <p><a href="https://github.com/twitter/bootstrap/issues/1036" rel="nofollow noreferrer">Modal window in 2.0 not positioning properly</a></p>
  
  <p>The screen darkens but the modal itself is not visible in the viewport.  It's possible to find it at the top of the page.  The problem occurs when you've scrolled down on the page.</p>
  
  <p>Here is a relevant portion of bootstrap-responsive.css:</p>
  
  <pre><code>.modal {
      position:fixed;
      top:50%;
      left:50%;
      z-index:1050;
      max-height:500px;
      overflow:auto;
      width:560px;
      background-color:#fff;
      border:1px solid #999;
      -webkit-border-radius:6px;
      -moz-border-radius:6px;
      border-radius:6px;
      -webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
      -moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
      box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
      -webkit-background-clip:padding-box;
      -moz-background-clip:padding-box;
      background-clip:padding-box;
      margin:-250px 0 0 -280px;
  }
  </code></pre>
  
  <p>Is there a fix I can apply?</p>