JQuery Mobile Textbox inside a iframe is malfunction in UIWebView

JQuery Mobile Textbox inside a iframe is malfunction in UIWebView

Hi All

When I use UIWebView to browse a html having iframe to include another jquery mobile form, the textbox inside the form is malfunction.

Please find my attached code

Test1.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <title>Test Layout</title>
<meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }

            #content
            {
                position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
            }
        </style>
    </head>
    <body>
        <div id="content">
            <iframe width="100%" height="100%" frameborder="0" src="./test2.html" />
        </div>
    </body>
</html>



Test2.html


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css" />
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
<style>
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
    height: 850px;
}
.ui-mobile, .ui-mobile .ui-page {
    min-height: 85px;
}
.ui-content{
padding:10px 15px 0px 15px;
}
</style>
<script type="text/javascript">
            $(document).ready(function() {
$('#basic').bind("input", function(e) {
var offset = $('#basic').offset();
$(document).scrollTop(offset.top);
                    $(document).css("overflow","hidden")
                });
})
        </script>
</head>

<body>
<div data-role="page" style="max-height:90px; min-height:90px;">
<div role="main" class="ui-content">
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="">
</div>
</div>
</body>
</html>
 


Walk through:
1. Use IOS UIWebView to visit my text1.html
2. focus the textbox, drag the mobile form up and down.
3. you cannot type anything into the textbox

Please help, 
Many Thanks

Taka Wong