JQM/openlayers Navbar selection with Samsung Android devices

Question

I have a jquery-mobile/phonegap app that uses openlayers for mapping. On pages that use a map, see image below, I have a problem selecting the footer menu.

If, for example, I select Home, the application will navigate to capture. This only happens on pages that display a map. I am using the map.render function in openlayers, as the map is shared between multiple screens. If I remove the render function the menu works as expected.

I have added a click function to view the x position of the problematic click and note that the x position reflects the position of the menu of the page navigated to and not the menu clicked.

The menu is as follows:

  <div class="menu" data-role="footer" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li>
          <a href="index.html"
             class="home-button"
             data-icon="custom">Home</a>
        </li>
        <li>
          <a href="map.html"
             class="map-button ui-btn-active"
             data-icon="custom">Map</a>
        </li>
        <li>
          <a href="capture.html"
             class="capture-button"
             data-icon="custom">Capture</a>
        </li>
        <li>
          <a href="download.html"
             class="download-button"
             data-icon="custom">Download</a>
        </li>
      </ul>
    </div>

If I remove the data-role="footer" div the navbar menu works as expected.

Note: this has been reproduced on Samsung devices using android 2.3.5 only. I works fine on Samsung devices with android 2.3.6, 4+ and all other models we have tested.

Using: openlayers 1.12 jquery-mobile: 1.2.0 (also tried 1.3.0)

Answer 1

Setting the z-index of the footer solved this problem:

.ui-footer {
    z-index: 10000;
}