Question

我有一个背景附件的DIV：固定，另一个DIV在页面下方，位置：固定。这在IE11和Firefox 31.0中运行良好，但在Chrome中，带有background-attachment：fixed的div使用DIV滚动图像，并且在图像的整个宽度上有大的黑色块，有时覆盖图像的一半，有时在厚条（如果你愿意，像斑马）

如果我没有运行谷歌地图JS，或者有背景附件：滚动，或者有位置：静态，那么一切都按预期工作。

我做错了什么，这是Chrome中的错误吗？无论哪种方式，我需要找到一种方法使其行为符合预期（固定的背景图像和固定的谷歌地图div到窗口） - 所以要么修正我的代码，要么解决一个＆＃39; bug＆＃39;会非常有帮助的。

（除此之外：我还在导航栏的顶部有一个固定的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);映射到您的地图容器（据我所知，这无关紧要）。在我的样式表中用transform: inherit !important;覆盖它为我修复了这个问题。

谷歌地图api与背景附件的div冲突：固定与它重叠

1 个答案: