I'm fighting against this bug over the weekend and I can't find a solution. My JQuery Mobile app has some switches. When testing on android 2.2 or 2.3 a strange bug happens: I scroll down a little to reach the switches then I trigger them with a swipe gesture and the page jumps to the bottom or even over the bottom. From then on it's not possible to scroll to the top of the page! Seems a like the scrollable area has redefined itself somehow.
I made a simple demo to show this behavior. Everything is out of the box. JQM, JQ, iScroll and iScrollview untouched and no own code.
Update I just made an upgrade brunch on Github with JQM 1.3.2 - the switches are now working but a range slider doesen't ;/ Seems to be somethin with the slide event that triggers iscroll somehow.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>iScroll Jumpbug Demo</title>
<link rel="stylesheet" href="css/jquery.mobile-1.2.1.min.css"/>
<link rel="stylesheet" href="css/jquery.mobile.iscrollview.css" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.mobile-1.2.1.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/jquery.mobile.iscrollview.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" data-theme="b" id="main">
<div data-role="header" data-id="persist" data-theme="b" data-position="fixed">
<h3>
iScroll Jumpbug Test
</h3>
</div>
<div data-role="content" data-iscroll="{"hScroll":false, "vScroll": true, "vScrollbar":false, "bounce":false, "snap": false, "momentum":false}" style="padding: 2,5%">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-theme="b">
<a href="#" data-transition="slidefade">
Text
</a>
</li>
</ul>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-theme="b"><a href="#" data-transition="slidefade">Testelement1</a></li>
<li data-theme="b"><a href="#" data-transition="slidefade">Testelement2</a></li>
<li data-theme="b"><a href="#" data-transition="slidefade">Testelement3</a></li>
</ul>
<div style="width:100%; height: 3em;"> </div>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
<p>
This demo shows a bug that occures using JQM 1.2 and iScroll 4 with iScrollview on Android 2.x Devices.
When you drag the page a little down and then use the second swipe trigger, the page jumps to the bottom
over the border and "stucks" there - it's not more possible to scroll to the top. Looks a like the scrollable area redefines itself.
</p>
<!-- Test Form -->
<form>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="form_text">
Some Label
</label>
<textarea name="form_textarea" id="form_text" placeholder="Some fill element">
</textarea>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="toggleswitch1">
Switch me #1
</label>
<select name="form_mailinglist" id="toggleswitch1" data-theme="" data-role="slider">
<option value="0">
no
</option>
<option value="1">
yes
</option>
</select>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="toggleswitch2">
Switch me #2
</label>
<select name="form_mailinglist2" id="toggleswitch2" data-theme="" data-role="slider">
<option value="0">
no
</option>
<option value="1">
yes
</option>
</select>
</fieldset>
</div>
</form>
<!-- Linebreaks meant to make the scrollable area longer for testing purposes -->
<p>
<br/>
1
<br/>
2
<br/>
3
<br/>
4
<br/>
5
<br/>
6
<br/>
7
<br/>
8
<br/>
9
<br/>
10
<br/>
11
<br/>
12
<br/>
13
<br/>
14
<br/>
15
<br/>
16
<br/>
17
<br/>
18
<br/>
19
<br/>
20
<br/>
21
<br/>
22
<br/>
23
<br/>
24
<br/>
25
<br/>
26
<br/>
27
<br/>
28
<br/>
29
<br/>
30
</p>
<div> Wellcome to the bottom dude!</div>
</div> <!-- End of the content -->
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Footer >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
<div data-role="footer" data-id="persist" data-iconpos="top" data-position="fixed" data-theme="b">
<div data-role="navbar">
<ul>
<li>
<a href="#" data-theme="" data-icon="star"> Test </a>
</li>
<li>
<a href="#" data-theme="" data-icon="info"> Test2 </a>
</li>
</ul>
</div>
</div>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
</div> <!-- End of the page -->
</body>
</html>
You can find the demo on GitHub: https://github.com/Hexodus/iScroll_Jumpbug
There is even the apk file when you like to take a quick glance (your phone should be Android 2.2 or 2.3):
Or you can quickly install it via QR code:
By the way - I really can't replicate this bug on jsfiddle because it doesen't happen there. Jsfiddle is changing something so the page is not even shown correctly.
I badly need your assistance folks.