Mobile Map disappears on navigation

Question

I'm using Qooxdoo 3.0 and started work on a mobile app, but my OpenLayers map disappears after I navigate to a new page and then try to go back to the map page. It works fine on a desktop, but not on the iPad that I'm testing it on. It almost seems that the map gets pushed behind the page on the show command. Is there a way to move it back up to the top or maybe there is something else happening? Here is the code:

  // Initialize both pages
  var mapPage =  meddv2.page.Maps.getInstance();      
  var controlPanel = meddv2.page.ControlPanel.getInstance();

  // *** show the map page *** - map does not appear
  controlPanel.addListener("back", function() {
      mapPage.show({reverse:true});

  // *** I thought this may help which calls map.updateSize() in the map class 
      mapPage.redrawMap(); 
    }, this);

  // Show the Control Panel
  var controlPanelButton = new qx.ui.mobile.navigationbar.Button("Control Panel");
  controlPanelButton.addListener("tap", function(){
      controlPanel.show();
  }, this);
  mapPage.getLeftContainer().add(controlPanelButton);     


  // Add the pages to the page manager.
  var manager = new qx.ui.mobile.page.Manager(false);
  manager.addDetail([
    mapPage,
    controlPanel
  ]);

  //Show the map page on load
  mapPage.show();     

Thanks for your help!

Answer 1

On which device does this behavior occur?

What kind of Map do you use? OpenLayers? Google Maps?

You could try redraw that map on page "start" event.

Might be a rendering bug, please try following CSS statement in your "styles.css":

* {
  -webkit-backface-visibility:hidden;
}

It that helps, you have to find out, which div element needs the fix.

These are the styles I applied in qx.Mobile Maps demo. This may help you prevent the rendering bug.

#osmMap {
  -webkit-transform: translate3d(0,0,0);
}

#osmMap > div {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
}

.olMapViewport {
  position:static !important;
}