JS Google Maps 破坏了固定元素答案

【问题标题】：JS Google Maps breaks fixed elementJS Google Maps 破坏了固定元素
【发布时间】：2015-09-24 03:37:41
【问题描述】：

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

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

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

【问题讨论】：

这既是与浏览器相关的问题（它适用于 Chrome，但不适用于 FF），也与 z-index 有关。像您对地图所做的那样，提供小于“-1”的负 z-index 应该可以解决问题。
@DanieleB 当我给地图一个正的 z-index 时它可以工作，但现在我无法让文本放在上面。
向文本元素添加一个大于地图之一的 z-index 可能会起作用...

标签： javascript css google-maps

【解决方案1】：

将 translateZ 添加到固定元素

-webkit-transform: translateZ(0);

我是在分析整个谷歌地图画布时发现的。 API 还将 a-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%;
}

最好的问候

【讨论】：

这似乎解决了渲染问题，但会破坏关键帧动画（至少在 Chrome 中：35.0.1916.114）。关于如何在不破坏动画或诉诸丑陋黑客的情况下解决此问题的任何想法？
将变换道具添加到固定元素有助于解决此问题。有趣的是，这只发生在 Chrome 中 - FF 和 IE 都没有问题地呈现这个。

【解决方案2】：

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

希望有帮助..

【讨论】：

【解决方案3】：

这是与添加到外部地图元素的“转换”css 设置相关的某种 webkit 错误。 transform:translateZ(0px) 被添加到样式属性中，但不需要在其中，删除它没有效果。

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

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

注意，[style] 部分只有在 google 添加 style 属性时才会生效，并且可能需要更改 #map-canvas 以匹配您发送给 google.maps.Map() 的元素

【讨论】：