Question

我有一个带有固定导航栏的网站，该导航栏应该与页面一起滚动。当我添加JS Google Map时，导航栏不再移动：

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

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

从谷歌地图div中删除z-index并给它一个不透明度值，使文本变得可见..玩弄它们..

希望有所帮助..

Answer 3

这是与＆＃34;转换＆＃34;相关的某种webkit错误。添加到外部地图元素的css设置。转换：translateZ（0px）添加在样式属性中，但不需要在那里，删除它没有效果。

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

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

注意，[style]部分只有在google添加了style属性才会生效，并且可能需要更改#map-canvas以匹配您发送到google.maps.Map（）

JS谷歌地图打破固定元素

3 个答案: