在Chrome上滾動時移動的Webkit掩碼

Question

我一直在試圖製作一個圓整的Google地圖。我終於實現了它，這裏是的jsfiddle

http://jsfiddle.net/DZTvR/13/

的問題是在鉻當我滾動，面具保持，而地圖上向下滾動同一個地方。

我已經在FF，opera opera和IE上測試過了，它的效果很好。它不僅僅是Chrome

的HTML是

<div id="wrapp"> 
     <div id="mask"> 
      <div id="anyotherID"></div> 
     </div> 
</div> 

的JS

window.onload=function(){ 
    var myLatlngDist = new google.maps.LatLng(-32.242741,-60.161446); 
    geocoder = new google.maps.Geocoder(); 
    directionsService = new google.maps.DirectionsService(); 
    var mapOptionsDist = { 
     zoom: 4, 
     center: myLatlngDist, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    mapDist = new google.maps.Map(document.getElementById('anyotherID'), mapOptionsDist); 
} 

的CSS

#anyotherID{ 
    height:427px; 
    width:428px; 
    -webkit-border-radius: 1000px; 
    -moz-border-radius: 1000px; 
    border-radius: 1000px; 
    overflow: hidden; 
} 
#mask { 
    border-radius: 1000px; 
    -moz-border-radius: 1000px; 
    -webkit-border-radius: 1000px; 
    overflow: hidden; 
    position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */ 
    /* this fixes the overflow:hidden in Chrome */ 
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 
} 

感謝您的幫助！

Answer 1

得到它終於在這裏工作是我固定它

HTML：

<div id="wrapp"> 
    <div id="mask"> 
     <div id="anyotherID"></div> 
    </div> 
     <div style="clear:both;"></div> 
</div> 

的Javascript：

var mapOptionsDist = { 
    zoom: 12, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    mapTypeControl: true, 
    mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
     position: google.maps.ControlPosition.BOTTOM_CENTER 
    }, 
    zoomControl: true, 
    zoomControlOptions: { 
     style: google.maps.ZoomControlStyle.SMALL 
    } 
} 
mapLoc = new google.maps.Map(document.getElementById('anyotherID'), mapOptionsDist); 

而CSS：

#anyotherID{ 
    height:427px; 
    width:427px; 
} 
#mask { 
    border-radius: 1000px; 
    -moz-border-radius: 1000px; 
    -webkit-border-radius: 1000px; 
    height:427px; 
    width:427px; 
    overflow: hidden; 
    position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */ 
    -webkit-mask-image: url("/Resources/Image/px.png"); 
} 
#wrapp{ 
    height:427px; 
    width:427px; 
    float:left; 
} 

只是爲了澄清，圖像px.png是ju st一個黑色像素的圖像，沒有它，它將不起作用