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.
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.
I've tried adding overflow: scroll;
-webkit-overflow-scrolling: touch;
to the CSS of the body and the container but this won't fix the problem.
The HTML
<body>
<div id="container">
</div>
<body>
The CSS
/* 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;
}
Does anyone know how to solve this? Is it a CSS or a JavaScript problem?
Thanks in advance.