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

尝试这个。将这两种样式应用于地图所在的主要 div 及其所有主要子项。似乎工作得很好：

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

在 Mac 上最新的 Safari 和 Chrome 上进行了测试。

演示在这里