Border Radius on iPad and iPhone

Question

I'm having a problem with border-radius on iPhone and iPad. I'm trying to generate a round googlemap, which is working fine in every browser and on every system except ios. What I've done so far is, I've got a map-canvas

<div class="col-sm-4"><div id="map_canvas"></div></div>

and my css

#map_canvas {
    height:474px;
    width:474px;
    border-radius:237px;
    margin-bottom:73px;
    display: block;
    overflow:hidden !important;
    position: relative !important;
}

after this wasn't working, i tried to add more border-radius:

.gm-style {
    height:474px;
    width:474px;
    border-radius:237px;
    overflow:hidden !important;
}
#map_canvas .gm-style > div {
    border-radius:237px;
}

but still no success. Here's a live example: http://kristinwalzer.at/website/kontakt.php

Anyone knows this problem? And a solution perhaps?

Answer 1

Add one more div for round box and add properties to that round box

<div class="col-sm-4">
   <div class="roundBox">
      <div id="map_canvas"></div>
   </div>
</div>


.roundBox{
    height:474px;
    width:474px;
    border-radius:237px;
    overflow:hidden !important;
    position: relative !important;
    z-index: 999; 
}

#map_canvas {
    height:474px;
    width:474px;
    display: block;
    border-radius:237px;
}

Answer 2

I've found this In webkit browsers, v3 google maps do not respect container's border-radius. Anyone have a workaround?

All fiddles in this post won't work on safari (windows and ios). But even if they said in that question that it is solved, it is not. Looks like a Googlemap V3 Bug.