Маска Webkit, перемещающаяся при прокрутке по хромированию

Question

Я пытался создать округлую карту google. Я, наконец, достиг этого и вот jsfiddle

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

Проблема заключается в хроме, когда я прокручиваю, маска остается в том же месте, в то время как карта прокручивается вниз.

Я тестировал FF, оперное сафари и IE, и он отлично работает. Это просто хром

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 is ju st изображение черного пикселя, без него он не будет работать