ios5 css scroll bug


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

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <!-- ALL CSS STYLES -->
    <style>

html {
background: black;
color: #FFF;
font: normal 1.6em Helvetica, Arial, sans-serif;
}

body,ul,li {
padding: 0;
margin: 0;
border: 0;
}

body {
-webkit-user-select: none;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.viewPanel {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
overflow: hidden;
}

.scrollerWrapper {
overflow: auto;
width: 100%;
}

.scrollerInnerWrapper {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}

.horizontalScrollable {
height: 100px;
}

.scrollersContainer {
position: absolute;
left: 0px;
right: 0px;
top: 90px;
bottom: 60px;
}

.tab-bar {
position:absolute;
bottom:0px;
left:0px;
right:0px;
height:64px;
}

.tab-button {
float: left;
width: 120px;
height: 64px;
background-size:64px 64px;
background-repeat:no-repeat;
}

.dummy-wrapper {
font-size:12px;
width: 104px;
height: 98px;
float: left;
margin: 0 0 0 2px;
background-size: 104px 98px;
background-repeat: no-repeat;
}

.dummy-wrapper:active {
-webkit-box-shadow: inset 0 0 15px 0.5em white;
}


    </style>

    <!-- LIBRARIES (plain)-->

    <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>

    <script type="text/javascript">


function onLoad(){
  document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady() {
  console.log('onDeviceReady');

  // global error handling...
  window.onerror = function(err) {
    console.error('ERROR: '+err.message);
  };

  // monitor touch and gesture events, (also seems to help the active state bug caused by CSS scroll.)
  var events = ["gesturestart", "gesturechange", "gestureend", "mousemove", "mousedown", "mouseup", "mouseover", "mouseout", "touchcancel", "touchend", "touchmove", "touchstart"];
  for(var i=0; i<events.length; i++){
    var event = events[i];
    window.addEventListener(event,function(){console.log('event='+event);},true);
  }

  makeTabs();

  // start the application
  goScreen1();
}

function makeTabs(){
  document.getElementsByTagName('body')[0].innerHTML = '<div id="viewPanel" class="view-panel"></div><div id="tabBar" class="tab-bar"><div id="screen1-button" class="tab-button">[screen 1]</div><div id="screen2-button" class="tab-button">[screen 2]</div></div>';
  document.getElementById('screen1-button').addEventListener('touchstart', function(){
    goScreen1();
  }, false);
  document.getElementById('screen2-button').addEventListener('touchstart', function(){
    goScreen2();
  }, false);
}

function goScreen1(){

  document.getElementById('viewPanel').innerHTML = '';
  document.getElementById('viewPanel').innerHTML = '<div>Scroll the divs below... then go to screen 2.</div><div class="scrollersContainer"><div class="scrollerWrapper"><div class="scrollerInnerWrapper"><div class="horizontalScrollable" id="featuredScroll" style="width: 856px; "><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div></div></div></div><div class="scrollerWrapper"><div class="scrollerInnerWrapper"><div class="horizontalScrollable" id="brandsScroll" style="width: 856px; "><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div></div></div></div><div class="scrollerWrapper"><div class="scrollerInnerWrapper"><div class="horizontalScrollable" id="streamScroll" style="width: 856px; "><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div><div  class="dummy-wrapper" >Text in a div</div></div></div></div></div>';

};

function goScreen2(){

  document.getElementById('viewPanel').innerHTML = '';
  document.getElementById('viewPanel').innerHTML = '<input type="button" id="back-button" class="button" value="CLICK THIS BUTTON"/><div>The first time you visit this screen, the click event is never fired so the button is not clickable... Now go back to screen1 and the scrollers are broken...</div>';
  document.getElementById('back-button').addEventListener('click', function(){
    alert('BUTTON CLICK!');
  }, false);
};

    </script>
  </head>
  <body onload="onLoad()">
  </body>
</html>