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?

amol · Answer 1 · 2014-07-23T13:27:49.943

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;
}

edited Jul 23 '14 at 13:27

answered Jul 23 '14 at 12:52

amol

1,535
9
10

You need to add `border-radius:237px;` to `#map_canvas` also – amol Jul 23 '14 at 13:12
I can see the circle, but in the moment the map is loaded, the border-radius is gone. A second `overflow:hidden` isn't helping either. – Andi Jul 23 '14 at 13:18
You need to add `border-radius:237px;` to both `.roundBox` and `#map_canvas` – amol Jul 23 '14 at 13:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/57842/discussion-between-amol-and-andi). – amol Jul 23 '14 at 13:30
at least not at my iphone :( – Andi Jul 23 '14 at 13:31

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

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.

edited May 23 '17 at 10:33

Community

1
1

answered Jul 23 '14 at 13:59

Andi

909
1
11
26

Border Radius on iPad and iPhone

2 Answers2