Jquery Mobile phonegap vertical content limited to viewport on IOS

Question

I have a fairly strange issue that I'm experiencing with jquery mobile / phonegap and IOS.

I've created a web app with html / css and so far it works exactly as expected on android, (The content scrolls vertically in the viewport) however on ios (my test platform is an iphone 4s), the page is limited vertically to the viewport. It scrolls just fine, but all content that sits below the viewport vertically get's cut off, IE the only content that will display is what I see in the upper half of the page, nothing below the viewport will display.

an excerpt from my css file:

html, body {
min-height:100%;
overflow-x:hidden;
background-attachment:fixed;

}

body {
-webkit-touch-callout: none;                
-webkit-text-size-adjust: none;             
-webkit-user-select: none;             
-webkit-font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
-webkit-overflow-scrolling: touch;

}

and my html page, in the head section:

    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1 minimum-scale=1; user-scalable=no" />

Here's a couple screenshots of the problem in action:

As you can see from the screen shots, the gradient "should" fill the whole page (ie, expand with content), and it doesn't as there seems to be a hard cutoff at the viewport edge, so any more than a single page of content is not getting displayed. While it's not visible in these screenshots the vertical scrollbars are appearing as they should and the scrolling works fine, just no content is displayed "below the fold".

I am not using iScroll or any other scrolling scripts, just fyi.

I'm not sure if this is some sort of height issue, as I have a min-height:100%; set on the html and body of the page, or if it's some sort of width-device-width issue in the meta tag? I also do not believe I have any overflow-y:hidden set, as that would have limited the content on other platforms, and they work perfectly.

I feel like I must be missing something really basic, as I'm sure it's got to be some sort of css setting somewhere that's limiting the content to the viewport only, and an exhaustive google search could find no similar issues.

Answer 1

Check if your apps default orientation is set to portrait instead of landscape, or if it even supports the portrait orientation. It almost looks like its displaying the app as if its in landscape mode while its clearly in portrait. You can find the available orientation in the Target>General tab, or in the info.plist.

Answer 2

So I've fixed it, and the weird thing is, I'm not exactly sure what I did to fix the issue.

I moved the .ui-page selector from the jquery-mobile file to my own css file, removed the min-height from the html selector and killed the overflow-x from the html, body selectors and boom, it now appears to be working as intended. Wacky... but hey, a win is a win. :)