jQuery Mobile + iScrollView: Weird Input Behavior

jQuery Mobile + iScrollView: Weird Input Behavior

Hi Everyone,

I'm writing an app with jQuery Mobile + iScrollView and I've noticed a strange behavior on form's inputs.

The blinking input caret doesn't blink, it keeps frozen and the cursor position arrow moves without the caret following it, after typing input values.

It can be tested on Android's Native Browser here .

It can be seen on the screenshots one and two .

Is there any kind of fix to it or a work around?

Here is the complete index.html code:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8"> 
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <!-- CSS -->
  7.     <link rel="stylesheet" href="jquery/jquery.mobile.theme-1.3.2.min.css" />
  8.     <link rel="stylesheet" href="jquery/jquery.mobile.structure-1.3.2.min.css" />
  9.     <link rel="stylesheet" href="addons/iscroll/jquery.mobile.iscrollview.css" />
  10.     <link rel="stylesheet" href="addons/iscroll/jquery.mobile.iscrollview-pull.css" />
  11.     <!-- JS -->
  12.     <script src="jquery/jquery-1.9.1.min.js"></script>
  13.     <script src="jquery/jquery.mobile-1.3.2.min.js"></script>
  14.     <script src="addons/iscroll/iscroll-4.2.0.js"></script>
  15.     <script src="addons/iscroll/jquery.mobile.iscrollview.js"></script>
  16.   </head>
  17.   <body>
  18.     <div data-role="page" class="pageForm" data-theme="a">
  19.       <div data-theme="c" data-role="header">
  20.         <h3>Some Header</h3>
  21.       </div>
  22.       
  23.       <div data-role="content" class="contentForm" data-iscroll>
  24.         <form>
  25.           <fieldset>
  26.             <div data-role="fieldcontain">
  27.               <label for="profileEmail">E-mail:</label>
  28.               <input type="text" id="profileEmail" name="profileEmail" value="test@test.com" data-theme="a" readonly />
  29.               <p>
  30.                 <label for="profileDocument" class="lblDocument">Document Number:</label>
  31.                 <input type="text" id="profileDocument" name="profileDocument" value="0123456789" data-theme="a" readonly />
  32.               </p>
  33.               <p>
  34.                 <label for="profileFullName" class="lblFullName">Full Name:</label>
  35.                 <input type="text" id="profileFullName" name="profileFullName" value="" data-theme="d" />
  36.               </p>
  37.               <p>
  38.                 <label for="profileMobile">Mobile:</label>
  39.                 <input type="tel" id="profileMobile" name="profileMobile" value="" data-theme="d" maxlength="16" />
  40.               </p>
  41.               <p>
  42.                 <label for="profilePassword">Password:</label>
  43.                 <input type="password" id="profilePassword" name="profilePassword" value="" data-theme="d" />
  44.               </p>
  45.               <p>
  46.                 <label for="profileRetypePassword">Retype Password:</label>
  47.                 <input type="password" id="profileRetypePassword" name="profileRetypePassword" value="" data-theme="d" />
  48.               </p>
  49.             </div>
  50.             <a href="#" class="btnSaveProfile" type="button" data-theme="b" data-icon="check">Save Form Data</a>
  51.             <a href="#" class="btnBackToMenu" data-role="button" data-theme="e" data-icon="grid">Return to Main Menu</a>
  52.           </fieldset>
  53.         </form>
  54.       </div>
  55.       <style type="text/css">
  56.         .contentForm, .contentForm div.iscroll-scroller {
  57.           width: 100% !important;
  58.         }
  59.       </style>
  60.     </div>
  61.   </body>
  62. </html>

Thanks in advance.