title: overflow-x:hidden not working on iPhone
body: <p>I'm trying to create a site that feels like a native app on iPhone/Android devices.
  I've managed to set it up so html and body do not scroll and I have a single content <code>&lt;div&gt;</code> which is the scrollable part.</p>
  
  <p>However, when setting</p>
  
  <pre><code>overflow-x:hidden
  </code></pre>
  
  <p>to allow only vertical scrolling I still get a horizontal scrolling behavior on iPhone (Chrome and Safari). You can see the scrollbar belongs to the .content element. Setting</p>
  
  <pre><code>overflow:hidden
  </code></pre>
  
  <p>works as expected and disables all scrolling.</p>
  
  <p>To me it looks like a bug on Chrome.</p>
  
  <p>The code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
  &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
  &lt;style&gt;
  html, body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
  }
  
  .scroll {
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
  }
  
  .content {
      height: 2000px;
      margin: 10px;
      overflow-x: hidden;
      background: linear-gradient(to bottom, #f00 0%, #00f 50%);
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="scroll"&gt;
    &lt;div class="scroll"&gt;
      &lt;div class="content"&gt;
        &lt;div style="height: 20px; width: 1000px; background: black;"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>