Safari violates border radius using google maps in div

Question

First question on Stack for me. I did my homework and found something like this topic.

In webkit browsers, google v3 maps do not take into account the border radius of the container. Does anyone have a workaround?

but still i see the problem. I'm here. I embed Google maps in one project and want to fix it in a round frame.

While the solution I used works fine on chrome and Firefox, I just discovered that I did some kind of test that Safari doesn't display the radius of the border in the “clipping” container, allowing the google map content to overlap rounded corners.

It is strange that this behavior applies only to Safari. While on chrome, it works very well.

You can check it yourself by opening this violin in safari and chrome, and you will immediately notice the difference (mind in the corners)

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

The fiddle with the MAC is pretty obvious: just try in a different browser.

Here is the code structure used in the script that reflects 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 effect of cropping with a border radius works in Safari version 7.0.3, if inside the .clip div we have a static image as a background

Hope someone has a simple workaround:

thanks and ciao

Answer 1

. div, , . , :

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

Safari Chrome Mac.

Answer 2

webkit , css

#googleMap {
    position:relative;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
     border: 1px solid green;
    -webkit-mask-box-image: url(http://83.212.84.134/stackoverflow/mask.png);

    margin-left: auto;
    margin-right: auto;
    z-index:2;
}

Hide result

https://jsfiddle.net/kpolifimos/8npg26eL/1/