Seeing as GM seed has been released, we can talk about it now!
Looks like in iOS7 "-webkit-overflow-scrolling: touch" is broken. touch events for elements that are initially off screen do not fire (or in some cases are just unreliable).
Here is an example:
<!DOCTYPE html><html>
<head><title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
#scrollbox {
position: fixed;
top: 0px;
width: 100%;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.touchDiv {
position: relative;
width:100%;
height:80px;
background-color: #FFBBBB;
}
ul, li {
text-indent: 0px;
list-style: none;
padding: 0px;
margin: 0px;
}
li {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #333;
}
</style>
<script type="text/javascript">
function onBodyLoad() {
var touchDiv = document.getElementById("bottomDiv");
touchDiv.ontouchstart = function(e) {
alert("touched");
};
touchDiv = document.getElementById("topDiv");
touchDiv.ontouchstart = function(e) {
alert("touched");
};
}
</script>
</head>
<body onload="onBodyLoad()">
<div id='scrollbox'>
<div id="topDiv" class="touchDiv">Fires an event when touched</div>
<ul>
<li><a href='#' onclick="alert('1')">Link 1</a></li>
<li><a href='#' onclick="alert('3')">Link 3</a></li>
<li><a href='#' onclick="alert('4')">Link 4</a></li>
<li><a href='#' onclick="alert('5')">Link 5</a></li>
<li><a href='#' onclick="alert('6')">Link 6</a></li>
<li><a href='#' onclick="alert('7')">Link 7</a></li>
<li><a href='#' onclick="alert('8')">Link 8</a></li>
<li><a href='#' onclick="alert('9')">Link 9</a></li>
<li><a href='#' onclick="alert('10')">Link 10</a></li>
<li><a href='#' onclick="alert('11')">Link 11</a></li>
<li><a href='#' onclick="alert('12')">Link 12</a></li>
<li><a href='#' onclick="alert('13')">Link 13</a></li>
<li><a href='#' onclick="alert('14')">Link 14</a></li>
<li><a href='#' onclick="alert('15')">Link 15</a></li>
<li><a href='#' onclick="alert('16')">Link 16</a></li>
<li><a href='#' onclick="alert('17')">Link 17</a></li>
<li><a href='#' onclick="alert('18')">Link 18</a></li>
<li><a href='#' onclick="alert('19')">Link 19</a></li>
<li><a href='#' onclick="alert('20')">Link 20</a></li>
<li><a href='#' onclick="alert('21')">Link 21</a></li>
<li><a href='#' ontouchstart="alert('22')">Link 22</a></li>
</ul>
<div id="bottomDiv" class="touchDiv">Fires an event when touched 2</div>
</div>
</body>
I guess this will break the majority of mobile optimised web apps.
Any issues with the above code? And/or are there any workarounds?
(I have already raised a bug with apple - some time ago, and no response)
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
