jqm form jump

jqm form jumps when scrolled

by MarkGreene

HTML

<!DOCTYPE html>
<html>
<!-- NOTES  original code from   http://rixman.net/demo/scroll/1/ -->

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.css" />
<script src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
<head>
<meta charset=utf-8 />
<meta name=viewport content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<meta name=format-detection content="telephone=no">
<title>ios webkit native scroll test</title>
</head>
<body>
<header>Header</header>
<div class=app>
<div class="master vflex scrolling">
<div class=toolbar>
    <button>toolbar</button>
    </div>
<div class="panel vflex scrolling">
<div class="panel-content vflex">
<ul id=longlist style=display:inline>
<li>nav panel</li>
<li>list of</li>
<li>nav items</li>
<li>cillum dolore eu fugiat nulla pariatur.</li>
<li> non proident, sunt in culpa qui officia</li>
<li>deserunt mollit anim id est laborum.</li>
<li>Last line</li>
</ul>
</div>
</div>
</div>
<div class="detail vflex scrolling">
<div class="panel vflex scrolling" id=rightcontent>
<div class="panel-content vflex">
    <label>try scrolling down and clicking on a form field</label>
    <form>
        <div><label>label1</label><input/></div>
        <div><label>label2</label><input/></div>
        <div><label>label3</label><input/></div>
        <div><label>label4</label><input/></div>
        <div><label>label5</label><input/></div>
        <div><label>label6</label><input/></div>
        <div><label>label7</label><input/></div>
        <div><label>label8</label><input/></div>
        <div><label>label9</label><input/></div>
        <div><label>label10</label><input/></div>
        <div><label>label11</label><input/></div>
       ...

CSS

body,ul,li {  padding:0;  margin:0;  border:0; }
    body,button {   font-family: Helvetica, Arial, sans-serif; font-size:16px; }
    
    html,body {
      height:100%;
  
      /*fixes the page-bounce on desktop safari. tested on version 5.1 / mac */
      overflow:hidden;
    }

    ul {
        list-style:none;
        margin:0;
        padding:0;
    }
    ul li {
        padding:10px;
        line-height:30px;
        border-bottom:1px solid #999;
        border-top:1px solid #fff;
        font-size:26px;
    }
        p {margin:10px}
    
    .toolbar {
      border:1px solid #999;
      padding:10px;
    }
    header, footer {
      height:45px;
      line-height:45px;
      background:#444;
      color:#ccc;
      padding:0 10px;
    }
    footer {
      position:absolute;
      right:0;
      bottom:0;
      left:0;
    }
    
    article {padding:5px 10px}
    
    .vflex {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-box-align: stretch;
      -webkit-box-flex:1;       
    }
    
    .scrolling {
      -webkit-overflow-scrolling: touch;
      overflow:auto;      

    }
    
    .app {
      position:absolute;
      top:45px;
      bottom:45px;
      left:0;
      right:0;
      background:#999;
    }

    .master {
      background:#eee;
      position:absolute;
      top:0;
      width:320px;
      bottom:0;
      left:0;
      /* gets .vflex + .scrolling */
      
    }
    .detail {
      background:#eee;
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:321px;
      /* gets .vflex + .scrolling */
      
    }
        
    .panel {
      background:#fff;
      /* gets .vflex + .scrolling */
    }
    
    /* this adds the extra pixel that's neccessary if the content is < panel height */
    .panel-content {
      background:#fff;
      margin-bottom:-1px;
      /* gets .vflex */
    }