JS谷歌地图打破固定元素

Question

我有一个固定的导航栏的网站，应该滚动的页面。当我添加一个JS谷歌地图，导航栏不再移动:

http://amosjackson.com/map/index.html

而且，这个问题只在地图处于绝对位置时发生。

Answer 1

将translateZ添加到固定元素

-webkit-transform: translateZ(0);

我在分析整个谷歌地图画布时发现的。API还向映射中添加了一个 -webkit-transform: translateZ(0)。这使得许多浏览器无法正确绘制固定元素。

此外，固定元素可能还需要其他相关的可见性属性，如z-index和不透明度。

一个有效的解决方案:(我总是把我的地图画布到一个容器)

.my-fixed-elem {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 500 // adapt for your project
  opacity: 1 // some times you can remove this
}
.map-canvas-container {
    width: 100%; // somewidth
    height: 750px; // someheight
    position: relative;
    z-index: 18;
    top: 0;
    left: 0;
}
#map-canvas-contact {
    width: 100%;
    height: 100%;
}

Answer 2

从Google mapsdiv中删除z-index，并给它一个不透明度值，使文本变得可见。和他们玩一玩…

Answer 3

这是一种webkit bug，与添加到外部地图元素的"transform" css设置有关。transform:translateZ(0px)被添加到样式属性中，但不需要在那里，删除它没有效果。

所以答案是在页面上添加一个css行，并使用!important标志，这样它就会覆盖style属性的设置。

<style>
#map-canvas[style] { -webkit-transform:none !important; }
</style>

注意，[style]部分使它仅在google添加style属性时生效，并且可能需要更改#map-canvas以匹配您发送给google.maps. map ()