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

11  

Add translateZ to the fixed element

将translateZ添加到固定元素

-webkit-transform: translateZ(0);

I found out while analysing the whole google map canvas. The API adds also a -webkit-transform: translateZ(0) to the map. this breaks many browsers in painting the fixed elements correctly.

我在分析整个谷歌地图画布时发现了。 API还将-webkit-transform：translateZ（0）添加到地图中。这打破了许多浏览器正确绘制固定元素。

In addition the fixed element could also need other related visibility properties like z-index and opacity.

此外，fixed元素还可能需要其他相关的可见性属性，如z-index和opacity。

A working solution: (I always put my map canvas into a container)

一个有效的解决方案:(我总是将我的地图画布放入容器中）

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

Best regards

最好的祝福

0  

remove the z-index from the google maps div and also give it an opacity value such that the text becomes visible.. play around with them..

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

hope that helps..

希望有所帮助..

0  

It is some sort of webkit bug related to the "transform" css setting that is added to the outer maps element. The transform:translateZ(0px) is added in a style attribute, but does not need to be in there, removing it has no effect.

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

So the answer is to add a css line to the page and use the !important flag so it will override the style attribute's setting.

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

Note, the [style] part makes it only take effect if google adds the style attribute, and the #map-canvas may need to be changed to match the element you sent to google.maps.Map()

请注意，[style]部分仅在google添加样式属性时生效，并且可能需要更改#map-canvas以匹配您发送到google.maps.Map（）的元素