ios phonegap "black bar" after orientation change

Question

ios (ipad 3 or iphone 5) phonegap (currently latest 3.4.0) application with very simple html and inline css: http://pastebin.com/raw.php?i=fmq87E2U

The problem is that if I am on landscape orientation, change to portrait, unzoom, and then change back to landscape, then a black vertical bar appears on the right of the screen until I do any pinch/zoom.

screenshots:

1. start app on landscape
2. rotate to portrait
3. pinch-unzoom
4. rotate back to landscape (problem "black area" in this shot at the right hand side)

No matter what I do via CSS when the black bar appers, nothing can change this situation (I've even tried webkit rotate, scale but all affect the visible part of the page). I also tried window.resizeTo in order to trigger a browser "repaint" or something but no luck.

Any ideas on how to solve this?

This bug cannot be reproduced as a webpage on the ipad or iphone safari. On orientation change the screen adapts correctly.

Answer 1

How about the css below:

position:fixed;
width:100%;

Answer 2

The problem originates from the fact that the #container width is larger than the portrait width in pixels, thus the user has to manually unzoom (step 3). Changing orientation to landscape after unzooming (step 4) doesn't work well inside the phonegap browser (it works in the regular browser though).

So a solution I found is:

1. force the user to be unable to nativelly unzoom below 1 using minimum-scale=1 in the viewport (this solves the black bar problem)
2. use css zoom to adapt the #container dynamically on every orientation change thus making large content (e.g 900px wide) fit on smaller screens (e.g portrait ipad):

code

$(window).on("orientationchange", function() {
    var landscape = Math.abs(window.orientation)==90;
    var width = landscape?screen.height:screen.width;
    var divWidth = 900;
    $('#container').attr("style", "zoom: " + (width/divWidth));
});

The above is a workaround though. The real bug that is that the browser of phonegap doesn't recover from that situation (step 4) like the real browser does by adapting the native zoom automatically.