Search code examples
cssangularjstwitter-bootstrap-3angular-ui-bootstrapiphone-standalone-web-app

apple-mobile-web-app-capable angular-ui-bootstrap modal scrolling issue

I'm seeing an issue with a simple to-do list web app I am working on. I'm using 

<meta name="apple-mobile-web-app-capable" content="yes">

So it can do the iPhone standalone launch thing.

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:

apple web app modal issue

It's showing the items at the top of the list on top of the fixed header div and the modal itself.

The index.html looks like this:

<!DOCTYPE html>
<html ng-app="app" manifest="app.appcache">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes">

    <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">

    <link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">

    <title>All your lists</title>
</head>
<body>
    <div class="container" ng-view></div>
</body>
</html>

The view looks like this:

<div class="header">
    <div class="row">
        <div class="col-xs-3" style="text-align: left;">
            <button type="button" class="btn btn-sm btn-primary btn-top" ng-click="home()">
                <span class="glyphicon glyphicon-home"></span>
            </button>
        </div>
        <div class="col-xs-6" style="text-align: center; line-height: 40px; color: #eee">
            <h4>{{list.name}}</h4>
        </div>
        <div class="col-xs-3" style="text-align: right">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-sm btn-primary btn-top" ng-click="open()">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
            </div>
        </div>
    </div>
</div>

<ul class="list-group">
    <li class="list-group-item app-item" ng-repeat="item in items | filter: { checked: 'false' }">
        <list-item item="item" toggle="toggleItemCheck" delete="deleteItem"></list-item>
    </li>
    <li class="list-group-item got-item" ng-repeat="item in items | filter: { checked: 'true' }">
        <list-item item="item" toggle="toggleItemCheck" delete="deleteItem"></list-item>
    </li>
</ul>

The css 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;
}

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.

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.

Solution

  • My less than satisfactory solution to this problem was to use

    $window.scrollTo(0,0);

    before opening the modal