问Safari在div中使用Google地图打破边界半径

EN

Stack上的第一个问题我已经做了功课，找到了类似以下主题的内容

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

但我仍然在这里看到了issue..so我正在我的一个项目中嵌入谷歌地图，并希望将其裁剪在一个圆形框架中。

虽然我使用的解决方案在chrome和Firefox上工作得很好，但我刚刚在做一些测试时发现Safari不会在“裁剪”容器上渲染边框半径，允许google地图下面的内容重叠圆角。

奇怪的是，这种行为只适用于Safari。而在chrome上，它工作得很好..

你可以自己查看，在safari和chrome中打开这个小提琴，你会立即发现不同之处(注意角落)。

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

MAC带来的麻烦很明显:只要尝试使用不同的浏览器即可。

下面是小提琴中使用的代码结构，它反映了我在项目中使用的代码结构

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

注意:如果在.clip div中有一个静态图像作为背景，那么带有边框半径的裁剪效果可以在Safari版本7.0.3上工作

希望有人有一些简单的解决方法:)

谢谢，再见