android - 在 Android 2.x 上使用 JQM 开关元素时，iScroll 跳转到页面底部并卡在那里

Question

我在周末与这个错误作斗争，但我找不到解决方案。我的 JQuery Mobile 应用程序有一些开关。在 android 2.2 或 2.3 上进行测试时，会发生一个奇怪的错误：我向下滚动一点以到达开关，然后我用滑动手势触发它们，页面跳到底部甚至是底部。从那时起，无法滚动到页面顶部！似乎可滚动区域以某种方式重新定义了自己。

我做了一个简单的演示来展示这种行为。一切都是开箱即用的。JQM、JQ、iScroll 和 iScrollview 原封不动，没有自己的代码。

更新我刚刚使用 JQM 1.3.2 在 Github 上进行了升级早午餐 - 开关现在可以工作，但范围滑块没有；/ 似乎与以某种方式触发 iscroll 的滑动事件有关。

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

一步一步的错误测试1