html - Safari 在 div 中使用 Google map 打破边界半径

Question

关于 Stack 的第一个问题 我做了功课，发现了类似这个主题的东西

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

但我仍然看到了问题..所以我来了。我在我的一个元素中嵌入了谷歌地图，并希望将其剪辑在一个圆形框架中。

虽然我使用的解决方案在 chrome 和 Firefox 上效果很好，但我刚刚做了一些测试，发现 Safari 不会在“裁剪”容器上呈现边框半径，从而允许下面的谷歌地图内容与圆 Angular 重叠。

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

您可以自己在 safari 和 chrome 中打开这个 fiddle 来检查一下，您会立即发现差异(注意 Angular 落)

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

来自 MAC 的 fiddle 非常明显:只需尝试不同的浏览器。

这是 fiddle 中使用的代码结构，它反射(reflect)了我在元素中使用的代码结构

<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

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

谢谢再见

Answer 1

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

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

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

DEMO HERE