title: Scrolling in a HTML widget
body: <p>I've made a webpage that has an 4000px wide background and in Chrome and safari on Windows, Mac and iPad it scrolls nice. I can scroll to the left, the top and the right with no problems, just like you would expect it to be.</p>
  
  <p>But when I convert this page to .wdgt-format, import it into iBooks and preview it on the iPad (4) the page will not scroll in any direction.</p>
  
  <p>I've tried adding <code>overflow: scroll;
      -webkit-overflow-scrolling: touch;</code> to the CSS of the body and the container but this won't fix the problem.</p>
  
  <p>The HTML</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="container"&gt;
  &lt;/div&gt;
  &lt;body&gt;
  </code></pre>
  
  <p>The CSS</p>
  
  <pre><code>/* General */
  * {
      margin: 0;
      padding: 0;
  }
  body {
      font-family: Verdana, sans-serif;
  
  }
  
  #container {
      width: 10158px;
      height: 974px;
      background: url(../img/1B.jpg) no-repeat;
      -webkit-background-size: 10158px 974px;
  
  }
  </code></pre>
  
  <p>Does anyone know how to solve this? Is it a CSS or a JavaScript problem?</p>
  
  <p>Thanks in advance.</p>