jquery/jquery-mobile — Issue #3641: ui-mobile min-height greater than screen height
Author: gaflach
Created: 2012-02-25 18:53:11+00:00
State: open

When using small screen sizes (e.g QVGA), the html min-height property is set to a value which is greater than the available screen height (as retrieved by $.mobile.getScreenHeight()). Therefore it is possible to scroll over the page vertical bound even for full height pages as can be viewed in http://img163.imageshack.us/img163/5983/jqmminheightissue.png.

This issue is caused by CSS min-height property of class .ui-mobile defined at line 1163 of file jquery.mobile-1.0.1.css:
.ui-mobile, .ui-mobile .ui-page { min-height: 420px; }

The ui-mobile class is applied to html at line 6945 of file jquery.mobile-1.0.1.js:
$html.addClass( "ui-mobile ui-mobile-rendering" );

A temporarily fix can be achieved by inserting the following JavaScript snippet just after including JQM JavaScript:
$("html").css("min-height", $.mobile.getScreenHeight());

This issue is present also in the current test version of JQM 1.1pre.

For the specific case of running a JQM app on Android using PhoneGap considering a QVGA resolution The full screen height is indeed 420px, however the Android status bar take 19px. Calling $.mobile.getScreenHeight() correctly reports a screen height of 401px (420px - 19px), but the min-height property of ui-mobile is not adjusted to match such height.

Tested on Android 2.2.

PS. After writing this, I found the issue #3371 which is marked as closed. However the issue remains.