I've encountered a problem with a basic to-do list web application that I'm currently developing. In order to enable the iPhone standalone launch feature, I have included the following code:
<meta name="apple-mobile-web-app-capable" content="yes">
However, when I launch the app from the home screen and scroll to the bottom of a lengthy list extending beyond the screen, trying to add an item causes the modal to malfunction as depicted below:
https://i.sstatic.net/OKVgZ.png
The issue arises where the top items in the list obscure the fixed header div and the modal itself.
This is how the index.html file appears:
<!DOCTYPE html>
<html ng-app="app" manifest="app.appcache">
...
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>
...
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/undo.css">
...
<title>All your lists</title>
</head>
...
<div class="container" ng-view></div>
</body>
</html>
The view structure is defined as follows:
<div class="header">
...
</ul>
The CSS styling for the header div is:
.header {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 40px;
background-color: #444;
padding-left: 5px;
padding-right: 5px;
}
Interestingly, I do not encounter this issue when viewing the web application on desktop (in mobile view) or on my iPhone - it seems to automatically scroll to the top when the modal pops up.
Additionally, with the apple-mobile-web-app-capable mode activated, if the modal displays while I am at the top of a list, scrolling down reveals the end of the modal fade overlay, exposing some list items below.