title: apple-mobile-web-app-capable angular-ui-bootstrap modal scrolling issue
body: <p>I'm seeing an issue with a simple to-do list web app I am working on. I'm using </p>
  
  <pre><code>&lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
  </code></pre>
  
  <p>So it can do the iPhone standalone launch thing.</p>
  
  <p>The issue I'm seeing is when the app is launched from the home screen, I scroll to the bottom of a list that goes beyond the bottom of the screen and attempt to add an item, the modal messes up as shown below:</p>
  
  <p><a href="https://i.stack.imgur.com/OKVgZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OKVgZ.png" alt="apple web app modal issue"></a></p>
  
  <p>It's showing the items at the top of the list on top of the fixed header div and the modal itself.</p>
  
  <p>The index.html looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="app" manifest="app.appcache"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
  
      &lt;script src="js/vendor.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="css/app.css"&gt;
      &lt;link rel="stylesheet" href="css/undo.css"&gt;
  
      &lt;link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png"&gt;
      &lt;link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png"&gt;
      &lt;link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png"&gt;
  
      &lt;title&gt;All your lists&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container" ng-view&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The view looks like this:</p>
  
  <pre><code>&lt;div class="header"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-3" style="text-align: left;"&gt;
              &lt;button type="button" class="btn btn-sm btn-primary btn-top" ng-click="home()"&gt;
                  &lt;span class="glyphicon glyphicon-home"&gt;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-6" style="text-align: center; line-height: 40px; color: #eee"&gt;
              &lt;h4&gt;{{list.name}}&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-3" style="text-align: right"&gt;
              &lt;div class="btn-group" role="group"&gt;
                  &lt;button type="button" class="btn btn-sm btn-primary btn-top" ng-click="open()"&gt;
                      &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;ul class="list-group"&gt;
      &lt;li class="list-group-item app-item" ng-repeat="item in items | filter: { checked: 'false' }"&gt;
          &lt;list-item item="item" toggle="toggleItemCheck" delete="deleteItem"&gt;&lt;/list-item&gt;
      &lt;/li&gt;
      &lt;li class="list-group-item got-item" ng-repeat="item in items | filter: { checked: 'true' }"&gt;
          &lt;list-item item="item" toggle="toggleItemCheck" delete="deleteItem"&gt;&lt;/list-item&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The css for the header div is:</p>
  
  <pre><code>.header {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      width: 100%;
      height: 40px;
      background-color: #444;
      padding-left: 5px;
      padding-right: 5px;
  }
  </code></pre>
  
  <p>I am not seeing the issue when I look at the web app in the browser on both desktop (in mobile view) and on my iPhone - it seems to scroll to the top as the modal comes down.</p>
  
  <p>Another thing I noticed with the apple-mobile-web-app-capable mode is if the modal appears while I'm at the top of a list, I can scroll down and see where the modal fade overlay ends, exposing some list items.</p>