Safari 在 div 中使用谷歌地图打破边界半径答案

【问题标题】：Safari breaks border radius using Google maps in a divSafari 在 div 中使用谷歌地图打破边界半径
【发布时间】：2014-06-15 05:13:10
【问题描述】：

我在 Stack 上的第一个问题我做了功课，发现了类似这个话题的东西

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

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

虽然我使用的解决方案在 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 版

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

谢谢和Ciao

【问题讨论】：

这似乎是目前唯一的解决方案：stackoverflow.com/questions/15368627/…

标签： html google-maps-api-3 safari css

【解决方案1】：

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

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

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

DEMO HERE

【讨论】：

这在 IE10 中中断。地图全是灰色的。
我刚刚测试了 IE 9，它似乎对我来说很完美？
这在 Safari 7.0.6 中中断。地图全是灰色的。
@FredK - 适用于 Mac 或 Windows 的 Safari？
在优胜美地 chrome 40 中断。当然，还有野生动物园。

【解决方案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/看到一个工作示例

【讨论】：

【解决方案3】：

我不得不这样做：

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

【讨论】：