jQuery UI Sortable disables scroll on Android

jQuery UI Sortable disables scroll on Android

I use jQuery UI Sortable at my web. The problem is that the region of a sortable element lose touch responsiveness on Android devices, so the page becomes unscrollable. It occurs even if the Sortable function is not active. 

I looked into jQuery UI source code and found _refreshItems function is triggering this problem, but cannot figure out how to fix this.

This problem is reproducible on Android devices and Chrome's Developer Tools with the mobile emulation enabled. It is not reproducible on iPhone.

I use jQuery UI Touch Punch to use Sortable on touch devices, but adding/removing it does not affect this problem.

I searched similar problems on the web and stackoverflow, but they were different problems.

The entire html to test this problem is the following. You can see the Item area does not respond to touch at all, when Sortable is disabled.

  2. <!doctype html>
  3. <html lang="en">
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1">
  7.         <title>jQuery UI Sortable Test</title>
  8.         <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  9.         <style>
  10.             #sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
  11.             #sortable li { margin: 0; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  12.             #sortable li span { position: absolute; margin-left: -1.3em; }
  13.         </style>
  14.         <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  15.         <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  16.         <script>
  17.             $(function () {
  18.                 $("#sortable").sortable({disabled : true});
  19.             });
  20.         </script>
  21.     </head>
  22.     <body>
  23.         <ul id="sortable">
  24.             <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  25.             <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  26.             <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  27.             <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  28.             <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  29.             <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  30.             <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
  31.             <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 8</li>
  32.             <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 9</li>
  33.         </ul>
  34.         1<br>
  35.         2<br>
  36.         3<br>
  37.         4<br>
  38.         5<br>
  39.         6<br>
  40.         7<br>
  41.         8<br>
  42.         9<br>
  43.         10<br>
  44.         ...
  45.         50<br>
  46.     </body>
  47. </html>