Google Maps overflow through box on iOS - html

Question

I have problem with diplaying google map in circle on iOS systems. Map is overflowing box where it is included. It is a bug, or I do not know... Do you know some hack on that? Bug image.
My HTML code is pretty simple and looks like div.g-map>div.map where is rendered Google Map by JS.
CSS:
.map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* It has to be circle! */
.g-map {
position: relative;
width: 262px;
height: 262px;
border-radius: 50%;
overflow: hidden;
}

Answer 1

Try to avoid the use of absolute positioning if you can.
You still have an outer and inner blocks with same size.
Here is the fiddle, please try to open it in your browser:
https://jsfiddle.net/svitch/zb1fg48f/10/
And here is the code:
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru,
disableDefaultUI: true
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
#map, #g-map {
height: 262px;
width: 262px;
}
/* It's a circle */
#g-map {
border: none;
border-radius: 50%;
overflow: hidden;
}
<div id="g-map"><div id="map"></div></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
</script>

Answer 2

SOLUTION:
Just add z-index: 10; to .map and in iOS browsers map will not overflow circle.
.map {
z-index: 10;
...
}