Safari使用div中的Google地图打破边框半径

Question

关于Stack的第一个问题对我来说，我已经完成了我的作业并找到了类似这个主题的内容

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

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

虽然我使用的解决方案在chrome和Firefox上运行得很好我刚刚发现做了一些测试，Safari没有在“剪切”容器上渲染边框半径，允许底部谷歌地图内容与圆角重叠。

奇怪的是，这种行为仅适​​用于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 V7.0.3

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

谢谢和Ciao

Answer 1

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

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

在Mac上最新的Safari和Chrome上测试过。

DEMO HERE

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

你可以在https://jsfiddle.net/kpolifimos/8npg26eL/1/看到一个有效的例子

Answer 3

我不得不这样做：

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