<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>hScroll Failure</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="https://raw.github.com/cubiq/iscroll/master/src/iscroll.js"></script>
<script src="https://raw.github.com/watusi/jquery-mobile-iscrollview/master/lib/jquery.mobile.iscrollview.js"></script>
<style>
table {
width: 1000px;
}
table tr td {
height: 1000px;
width: 100px;
border: 1px solid black;
background-color: red;
vertical-align: top;
font-size: 40px;
}
</style>
<script>
// allow browser chrome to be scrolled to so you can refesh the page on iPhone
$.mobile.iscrollview.prototype.options.preventPageScroll = false;
$.mobile.iscrollview.prototype.options.scrollTopOnResize = false;
</script>
</head>
<body>
<header data-role="header">
<h1>Header</h1>
</header>
<div data-role="content" class="content">
<div id="iscrollified" data-iscroll='{"zoom": true, "zoomMin": 0.25, "hScroll": true, "preventPageScroll": false}'>
<!-- <div id="iscrollified" > -->
<ul data-role="listview">
<li>
<div id="container">
<table id="really-wide-content" width="1000">
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td>
6
</td>
<td>
7
</td>
<td>
8
</td>
<td>
9
</td>
<td>
10
</td>
</tr>
</table>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>