JQM / openlayers使用Samsung Android设备选择Navbar

Question

我有一个jquery-mobile / phonegap应用程序，它使用openlayers进行映射。在使用地图的页面上，请参见下图，我在选择页脚菜单时遇到问题。

例如，如果我选择Home，应用程序将导航到捕获。这仅发生在显示地图的页面上。我在openlayers中使用map.render函数，因为地图在多个屏幕之间共享。如果删除渲染功能，菜单将按预期工作。

我添加了一个点击功能来查看有问题点击的x位置，并注意x位置反映了导航到的页面菜单的位置，而不是单击的菜单。

菜单如下：

  <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>

如果我删除了data-role =“footer”div，则导航栏菜单会按预期工作。

注意：此功能仅在使用Android 2.3.5的三星设备上重现。我使用Android 2.3.6,4 +以及我们测试过的所有其他型号的三星设备都能正常工作。

使用： openlayers 1.12 jquery-mobile：1.2.0（也尝试过1.3.0）

Answer 1

设置页脚的z-index解决了这个问题：

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