Webkit mask moving when scrolling on chrome - html

Question

I've been trying to make a rounded google map. I've finally achieved it and here is the jsfiddle
http://jsfiddle.net/DZTvR/13/
The problem is in chrome when I scroll, the mask remains in the same place while the map scrolls down.
I have tested on FF, opera safari and IE and it works great. It's just chrome
The HTML is
<div id="wrapp">
<div id="mask">
<div id="anyotherID"></div>
</div>
</div>
The 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);
}
The 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);
}
Thanks for any help!

Answer 1

Got it to finally work here is how I fixed it
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);
And the 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;
}
Just to clarify, the image px.png is just an image of a black pixel, without it, it won't work