title: CSS / JS transform:translate3d and scrolling - smooth on Android, no momentum on iPhone
body: <p>I currently have a mobile website project in which I'm creating panels such that one panel can be viewed at a time, where when a user swipes left or right, the panel slides offscreen and a new panel slides in. Everything works fine on Android, and even behavior is acceptable on iPhone.</p>
  
  <p>However, scrolling on iPhone seems to lack momentum. In other words, when "flicking" the panel up / down, it scrolls on Android natively, but on iPhone it seems to lose momentum very quickly. I'd like to find a simple CSS or combo CSS / JS solution that works, without including additional libraries if possible.</p>
  
  <p>Here's the basic structure of the site:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;Head stuff here&lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;div class="headbox"&gt;Fixed position menu here&lt;/div&gt;
              &lt;div id="pages"&gt;
                  &lt;div class="page"&gt;Page panel here&lt;/div&gt;
                  &lt;div class="page"&gt;Page panel here&lt;/div&gt;
                  &lt;div class="page"&gt;Page panel here&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="bottommenu"&gt;Fixed position bottom menu here&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the basic CSS:</p>
  
  <pre><code>body {
      width:100%;
      overflow-x:hidden;
      font-size:17px;
      border-collapse:collapse;
  }
  .container {
      width:100%;
      height:100%;
      overflow-x:hidden;
  overflow-y:scroll;
      position:relative;
      /*-webkit-perspective:1000;
  -webkit-backface-visibility:hidden;*/
  }
  .headbox {
  font-size:17px;
      height:2.3529em;
      width:100%;
      top:0;
      position:fixed;
      text-align:center;
      color:#fff;
      z-index:1;
  }
  #pages {
      width:100%;
      height:100%;
      white-space:nowrap;
      font-size:0;
      -webkit-backface-visibility:hidden;
  -webkit-transform-style:preserve-3d;
      position:relative;
      -webkit-transform:translate3d(-100%,0,0);
      -moz-transform:translate3d(-100%,0,0);
      -ms-transform:translate3d(-100%,0,0);
      -o-transform:translate3d(-100%,0,0);
      transform:translate3d(-100%,0,0);
  }
  .page {
      width:100%;
      height:100%;
      display:inline-block;
      vertical-align:top;
  position:relative;
  white-space:normal;
      background:#fff;
  font-size:17px;
  }
  .bottommenu {
      position:fixed;
  bottom:0;
      left:0;
      width:100%;
      height:.2em;
      transition:height 400ms;
      -webkit-transition:height 400ms;
      -moz-transition:height 400ms;
      -ms-transition:height 400ms;
      -o-transition:height 400ms;
      z-index:1;
  }
  </code></pre>
  
  <p>And finally, the listener for scrolling, which shouldn't interfere with CSS or the ability to repaint, but maybe I am missing something:</p>
  
  <pre><code>var that = this;
  $(document).scroll(function(){
  if (!that.direction &amp;&amp; !that.loading) {
      that.direction = 'vertical';
      that.moving = true;
      if (that.scrolling) { clearTimeout(that.scrolling); }
      that.scrolling = setTimeout(function() {
      that.direction = false;
      that.sliding = 0;
      that._getMore();
      that.moving = false;
      },500);
  }
  });
  </code></pre>
  
  <p>Any ideas? I've tried numerous variations of <strong>-webkit-overflow-scrolling:touch;</strong>, <strong>overflow-y:scroll;</strong>, and other possible hacks / fixes / supported syntax, but nothing seems to help. I need the content to scroll within the <strong>body</strong> tag so that on iPhone the screen resizes itself on scroll, otherwise I'd use a scrollable div. This is not an option.</p>