javascript - google maps api 与带有背景附件 :fixed which overlaps it 的 div 冲突

Question

我有一个带有背景附件的 DIV:固定的，另一个 DIV 位于页面下方，位置为:固定的。这在 IE11 和 Firefox 31.0 中工作正常，但在 Chrome 中，带有 background-attachment: fixed 的 div 正在使用 DIV 滚动图像，并且在图像的整个宽度上有大的黑色 block ，有时覆盖图像的一半，有时在粗条中(像斑马一样)

如果我不运行 google map JS，或者不使用 background-attachment: scroll，或者不使用 position: static，那么一切都会如您所愿。

我做错了什么，这是 Chrome 中的错误吗？无论哪种方式，我都需要找到一种方法使其按预期运行(固定背景图像和固定谷歌地图 div 到窗口) - 所以无论是更正我的代码，还是解决“错误”都会非常有帮助。

(另外:我在导航栏的顶部也有一个固定的 DIV，但它不会影响这个问题。我相信这是因为它不与谷歌地图叠加)

完整代码:http://jsfiddle.net/chowie/rodx0v02/3/

HTML:

<div id="hobbiescontainer"  class="sectioncontainer">          
    <section id="hobbiesSection">    
        <a id="hobbies"><h4>Hobbies</h4></a>                    
        <p class="keytext">
        text content here
        </p>
    </section>
</div>

<div id="mapcontainer">
    <div id="map"></div>   
</div>

<div id="mapspace"></div>

CSS:

section {
position: relative;
z-index: 2;
overflow:auto;
padding: 0px;
}

JS:

function initialize() {
var mapOptions = {
    center: new google.maps.LatLng(51.5028397, -0.2521218),
    zoom: 15
};

var map = new google.maps.Map(document.getElementById("map"),
    mapOptions);

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.5028397, -0.2521218),
    map: map,
    icon: image,
});
}

Answer 1

Google 通过 javascript 将 transform: translateZ(0px); 内联样式的广告映射到您的 map 容器(据我所知，它什么都不做)。在我的样式表中使用 transform: inherit !important; 覆盖它为我解决了这个问题。