Ik heb een probleem met het gebruik van Iscroll5 op een Android phone (HTC).
Ik heb een simpele pagina gemaakt om een lijstje te vullen middels json.
Dit werkt allemaal prima, maar als ik de app installeer, werkt de scroll niet (direct). Vreemd genoeg wel nadat ik het scherm een keer flip. Dan werkt het zowel als ik de telefoon horizontaal of verticaal heb. Waar gaat het mis.
Code:
<!DOCTYPE html>
<html lang="nl">
<head>
<title>JouwJoure</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="./iscroll.js"></script>
    <script type='text/javascript'>
        var myScroll;
        function loaded () {
            myScroll = new IScroll('#wrapper');
        }
        function dataCallback(data) {
            $.each(data, function(key, val) {
                $('ul').append('<li><div class="lilogo"><img src="../afb/' + val.hoofd_categorie + '.png"  /></div><div class="litekst">'+val.titel+'</div></li>');
            });
        }
        function fetchData(soort) {
            var dataUrl = './blabla.php';
            if (myScroll.isReady()){
            $.getJSON(dataUrl, dataCallback);
            }
        }
        fetchData();
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded,   200); }, false);
    </script>

  <style>
    ul {
        list-style-type: none;
        padding: 0px;
        margin: 0px;
    }

    li {
    padding: 10px 0 10px 0;
    height: 80px;
    border-bottom: 1px solid grey;
    }
    
    .lilogo {
        position: relative;
        float: left;
        padding-left: 10px;
        width: 20%;
    }
    .litekst {
        position: relative;
        float: right;
        padding: 5px 10px 5px 0;
        font-size:18px;
        width: 80%;
     }

body {
    /* On modern browsers, prevent the whole page to bounce */
    overflow: hidden;
}

#wrapper {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;

    /* Prevent native touch events on Windows */
    -ms-touch-action: none;

    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}

#scroller {
    position: absolute;
width: 100%;
    /* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0,0,0,0);

    /* Put the scroller into the HW Compositing layer right from the start */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
  </style>
</head>
 
<body onload="loaded()">

    <div class="container">
        <div data-role="header" data-id="my-header" data-position="fixed">
            <div class="row">
                <div class="col-xs-12" style="background-color: #D00000;"><img src='../afb/logo.png' /></div>
            </div>
        </div>
        <div class="row">
        <!-- hier komt nog wat -->
        </div>
        <div class="row">
            <h3>Laatste nieuws:</h3>
                <div id="wrapper">
                    <div id="scroller">
            <!-- this UL will be populated with the data from the php array -->
                        <ul>
                        </ul>
                    </div>
                </div>
        </div>
    </div>
</body>
</html>