title: fixed menu inside scroll incorrectly
body: <p>I'm working on a website where the client would like the menu to be static at the top of the page, and when the menu is opened it opens a static menu which can be scrolled in case there are more menus than on the screen.</p>
  
  <p>I have this working correctly expect apparently on iphone 6 (not sure if other iphones are affected) when a user first scrolls the menu goes the opposite direction of the scroll. After first touch, it works fine.</p>
  
  <p><a href="http://readysalteddev.co.uk/hotrod/" rel="nofollow">http://readysalteddev.co.uk/hotrod/</a></p>
  
  <p>CSS</p>
  
  <pre><code>.menu-primary-menu-container {
      padding: 0;
      margin: 0;
      top: 0;
      left: 0;
      width: 100%;
      margin: $header-scrolled-height 0 auto;
      z-index: 99999;
      display: none;
      -webkit-overflow-scrolling: touch;
      position: fixed;
      overflow-y: auto;
      height: auto;
      max-height: 100%;
  }
  
  ul {
      padding: 0;
      list-style: none;
      margin: 0;
      -webkit-overflow-scrolling: touch;
      float: left;
      display: block;
      width: 100%;
      height: 700px;
  }
  </code></pre>
  
  <p>I read somewhere while researching that <code>-webkit-overflow-scrolling: touch;</code> might have helped, but apparently it hasn't.</p>
  
  <p>I'm working blind as I only have an ipad and android for testing, and it seemingly works perfect on both of these, including every web browser (not IE of course)</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Just saw on another question that maybe adding</p>
  
  <pre><code>     -webkit-transform: translateZ(0);
      -moz-transform:translateZ(0);
      -o-transform:translateZ(0);
      transform:translateZ(0);
  </code></pre>
  
  <p>Might help. Uploaded it and waiting on tester to confirm what happens.</p>
  
  <p><strong>UPDATE AGAIN</strong></p>
  
  <p>Didn't help apparently.</p>