javascript - 位置为 :fixed leaves gray trail after scrolling 的传单

Question

我正在尝试制作包含两个 div 的网站:

• 向左，Y 轴可随内容滚动
• 右，不动(位置固定)，仅包含标签和传单 map

当我滚动页面时，传单会留下灰色痕迹，我想将其去除。

我在这里(在 stackoverflow)找到的是 ma​​p.invalidateSize()，但它对我没有帮助。

Watch full jsfiddle example here .

HTML:

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

<div id="content">
Heres the text<br />
    ...
</div>

CSS:

html, body, #map {
    width: 100%;
    height: 100%;
}
#map{
    width: 400px; 
    height: 400px; 

    position: fixed; 
    left: 60%; 
    top: 30%;   
}

JS:

    // create a map in the "map" div, set the view to a given place and zoom
    var map = L.map('map').setView([51.505, -0.09], 13);

    // add an OpenStreetMap tile layer
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    window.map = map;

$(document).ready(function(){
    $(window).scroll(function(){
        window.map.invalidateSize();
    })
})

Answer 1

将其更改为background: none;

#map{
    width: 400px; 
    height: 400px; 
    background: none;
    position: fixed; 
    left: 60%; 
    top: 30%;   
}