Safari breaks border radius using Google maps in a div

Question

First question on Stack for me I've done my homework and found something like this topic

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

but still I see the issue..so here I am. I'm embedding google maps in one project of mine and want to clip it in a circle shaped frame.

While the solution I used works great on chrome and Firefox I just discovered doing some test that Safari does not render border radius on a "clipping" container, allowing the underneath google map content to overlap the rounded corners.

The odd thing is that this behaviour does apply only on Safari. While on chrome it works pretty fine..

You can check it out your self opening this fiddle in safari and chrome and you will immediately spot the difference (mind the corners)

http://jsfiddle.net/wmcmeans/YHX6c/

The fiddle from MAC is pretty evident: just try into different browser.

Here is the code structure used in the fiddle that mirrors the one I used in my project

<div id="map1" class="clip">
<!--MAP GOES HERE--->
</div>



.clip {
        overflow: hidden;
        border-radius: 20px;
        box-shadow: rgba(0, 0, 0, 0.55) 10px 20px 20px;
        border: 1px solid red;
    }

NOTE: The clipping effect with border radius works on Safari Version 7.0.3 if inside the .clip div we have a static image as a background

Hope someone has some simple workaround :)

thanks and Ciao

Answer 1

Try this. Applies the two styles to to major div that the map is in, along with all of its major children. Seems to work quite well:

#map1 > .gm-style > div, #map1 > .gm-style > div > div  {
    overflow:hidden;
    border-radius: 20px;
}

Tested on the most recent Safari and Chrome on Mac.

DEMO HERE