While using iframe, tapping a button causes scrolling to page top involuntarily

While using iframe, tapping a button causes scrolling to page top involuntarily

Hello all,


iphone4(ios4.31). Tapping a button causes scrolling to page top involuntarily.

This is how the trouble occurs;
Kill Safari process.
Run Safari, open frame.html and tap [move pageB].
Scroll down and tap [move pageA].
Then you'd be jumped to page top and the [move pageA] button doesn't work anymore.

Page reboot can resolve this trouble sometimes.
After killing and rerunning Safari process, you'll face it in high ratio.

I am in deep trouble and begging for your kindness!


frame.html
  2. <html>
  3. <head>
  4.  <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 
  5.  <meta name="format-detection" content="telephone=no" />
  6.  <style type="text/css"> 
  7.   html,body {
  8.    margin: 0;
  9.    padding: 0;
  10.   }
  11.  </style>
  12.  <title>frame</title>
  13. </head>
  14. <body>
  15. <iframe id="frame1" src="main.html" style="width: 100%; height: 400px; display: block; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; "></iframe>

  17. </body>
  18. </html>

main.html
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.  <meta charset="utf-8"> 
  6.  <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
  7.  <title>main</title> 
  8.  <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> 
  9.  <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> 
  10.  <script type="text/javascript"> 
  11.  $(document).bind("mobileinit", function(){
  12.   $.extend(  $.mobile , {
  13.     ajaxFormsEnabled: false,
  14.   });
  15.  });
  16.  </script>
  17.  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

  19. </head>
  20. <body>
  21.  <div data-role="page" id="A">
  22.   <div data-role="content">
  23.    <form action="main.html#B" method="post"> 
  24.     page A
  25.     <button id="movePageB" type="submit">move pageB</button>
  26.    </form>
  27.   
  28.   </div>
  29.  </div>

  31.  <div data-role="page" id="B">
  32.   <div data-role="content">
  33.    page B top
  34.    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  35.    <form action="main.html#A" method="post"> 
  36.     <button id="movePageA" type="submit">move pageA</button>
  37.    </form>
  38.   </div>
  39.  </div>

  41. </body>
  42. </html>