javascript - JS 谷歌地图打破固定元素

Question

我有一个带有固定导航栏的站点，该导航栏应随页面滚动。当我添加 JS Google map 时，导航栏不再移动:

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

此外，只有在 map 绝对定位时才会出现问题。

Answer 1

将translateZ添加到固定元素

-webkit-transform: translateZ(0);

我在分析整个谷歌地图 Canvas 时发现了这一点。 API 还添加了一个 -webkit-transform: translateZ(0) 到 map 。这会破坏许多浏览器正确绘制固定元素。

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

可行的解决方案:(我总是将我的 map Canvas 放入容器中)

.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%;
}

最好的问候