Question

Link to my app: http://gizeto.com/app_orange/index.html

I don’t understand why this occurs on orientationchange. Does anybody recognize this?

Answer 1

It appears as though you are using iScroll for your scrollable areas. If this is the case then you will need to update the iScroll instance whenever a resize or orientationchange event fires on the window object:

var myScroll = new iScroll();

//you can change `resize` to `orientationchange` if you only want to support mobile devices
$(window).bind('resize', function () {
    myScroll.refresh();
});

Source: http://cubiq.org/iscroll-4#refreshmethod

This should keep the iScroll area the correct dimensions when the size of the document changes. If the iScroll container (in your case this is the data-role="content" element) still doesn’t update it’s height then you may need to do that manually:

$(window).bind('resize', function () {
    $.mobile.activePage.children('[data-role="content"]').height('{HEIGHT HERE}px');
    myScroll.refresh();
});