jQuery mobile panel doesn't close fully only on Android browser

jQuery mobile panel doesn't close fully only on Android browser

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta name="viewport" content="width=device-width, initial-scale=1">
  5.     <link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet"/>
  6.     <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  7.     <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
  8. </head>
  9. <body>
  10.     <div data-role="page">
  11.         <div data-role="header" data-position="fixed" >
  12.             <h1>Test Page</h1>
  13.             <div data-type="horizontal" data-role="controlgroup">  
  14.                 <a href="#search_condition_panel" id="search_condition_btn" class="ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-grid">Show Options</a>
  15.             </div>
  16.         </div>
  17.         <div role="main" class="ui-content">
  18.         </div>
  19.         <div data-position-fixed="true" data-role="panel" data-display="overlay" id="search_condition_panel" data-position="right">
  20.             <div class="ui-field-contain">
  21.                 <label for="search-condition-select-brand">Brand</label>
  22.                 <select id="search-condition-select-brand" name="search-condition-select-brand" data-mini="true">
  23.                 </select>
  24.             </div>
  25.         </div>
  26.         <div id="datepicker"></div>
  27.     </div>
  28. </body>
  29. </html>

I have a weird issue with jQm panel.

An opened panel doesn't close fully. See below image:



Strangely, this only happens on Android browser, and not on PC (Chrome, IE).

Is this a bug with jQm or have I done something wrong?

jsfiddle: http://jsfiddle.net/nbh1rn33/