title: 'overflow-x: scroll' inside a fixed div prevents vertical scrolling on ios
body: <p>It seems that if you have a div with horizontal scroll, inside a div that is positioned fixed, it prevents vertical scrolling on IOS. I.E - if I begin scrolling by placing my finger on the horizontal scrolling div, and try to scroll vertically, nothing happens.</p>
  
  <p>Seems to be fine on my colleagues Andriod device. </p>
  
  <p>I have created a test case, demonstrating the issue here:</p>
  
  <p><a href="http://jsbin.com/jikatugeli/" rel="noreferrer">http://jsbin.com/jikatugeli/</a></p>
  
  <p>Here is the html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    some content underneath
    &lt;div class="pop-up"&gt;
      &lt;p&gt;I'm some other content&lt;/p&gt;
      &lt;div class="scrollable"&gt;
        &lt;div class="item"&gt;hi&lt;/div&gt;
        &lt;div class="item"&gt;hi&lt;/div&gt;
        &lt;div class="item"&gt;hi&lt;/div&gt;
        &lt;div class="item"&gt;hi&lt;/div&gt;
        &lt;div class="item"&gt;hi&lt;/div&gt;
        &lt;div class="item"&gt;hi&lt;/div&gt;
        &lt;div class="item"&gt;hi&lt;/div&gt;
        &lt;div class="item"&gt;hi&lt;/div&gt;
        &lt;div class="item"&gt;hi&lt;/div&gt;
        &lt;div class="item"&gt;hi&lt;/div&gt;
        &lt;div class="item"&gt;hi&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="somemoretext"&gt;
        hello there, I am some text to make things scrollable
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the css</p>
  
  <pre><code>p {
    font-size:22px;
  }
  
  .item {
    display:inline-block;
    width:80px;
      height:60px;
    font-size:78px;
  }
  
  .scrollable {
    width:350px;
    white-space: nowrap;
    overflow-x:scroll;
    overflow-y:hidden;
  }
  
  .pop-up {
    position:fixed;
    height:300px;
    background:red;
    border: 1px solid #000;
    width:100%;
    top:0;
    overflow-y:scroll;
    z-index:9999;
  }
  
  .somemoretext {
    padding-top:600px;
  }
  </code></pre>
  
  <p>Thanks for any help.</p>