JS谷歌地图打破固定元素

Question

我有一个带有固定导航栏的站点,该栏位应该与页面一起滚动.当我添加JS Google Map时,导航栏不再移动:

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

最好的祝福