Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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.

share|improve this question
Post some code. I had a similar problem with a web app not being scrollable on certain older iDevices and android browsers, the problem was there were some elements that were displayed at 100% height and width that I had to remove. – Joey 2 days ago
I don't have any 100% height/width but I've add some code. – Sgarz yesterday

This question has an open bounty worth +50 reputation from Sgarz ending in 3 days.

This question has not received enough attention.

1 Answer

Have you added in your head something like?
meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0"

share|improve this answer
Yes tried that before, didn't work. – Sgarz 12 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.