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

Another solution is to simply reload the page on orientation change. The phonegap browser adapts the zoom.

var originalPageLoadOrientation = window.orientation;
$(window).on("orientationchange", function() {
    // just to avoid initial orientationchange which is called on page load
    if (originalPageLoadOrientation==window.orientation) return;
    location.reload();
});

This of course may have other implications in the app. (e.g if the app is a complex single page application where reloading the whole page restarts everything).

Edit: Instead of location.reload(); a better way is to do location.href = location.href;. The latter seems to avoid a visible flashing of the display.