Safari在div中使用Google地图时破坏了边框半径

Question

这是我在Stack上的第一个问题。我已经做了功课，并找到了像这个主题一样的东西：

在webkit浏览器中，v3谷歌地图不遵循容器的边框半径。有人有解决方法吗？

但我仍然看到这个问题...所以我来了。我正在我的一个项目中嵌入谷歌地图，并想将其剪切为圆形框架。

虽然我使用的解决方案在Chrome和Firefox上运行得非常好，但我刚刚发现，通过一些测试，Safari不会呈现“剪切”容器的边框半径，允许下面的谷歌地图内容重叠圆角。

奇怪的是，这种行为仅适用于Safari。而在Chrome上，它的效果非常好...

您可以在Safari和Chrome中打开此fiddle，您将立即发现差异（注意角落）：

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

MAC上的这个fiddle相当明显：尝试在不同的浏览器中打开。

这是fiddle中使用的代码结构，镜像了我在项目中使用的代码结构。

<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 Version 7.0.3，则带边框半径的剪切效果可用。

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

谢谢，再见。

- Michele Ruini

---

目前看来，这似乎是唯一的解决方案：https://dev59.com/4m_Xa4cB1Zd3GeqP2Y5g - Kunsang

Answer 1

试试这个。对包含地图的主要div以及它的所有子元素应用这两种样式。看起来效果很好：

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

在Mac上，最新版本的Safari和Chrome已经过测试。

点此查看演示

- Fizzix

---

这在IE10中会出现问题。地图全部变成灰色。 - MacKinley Smith

我刚刚测试了所有回退到IE 9的方法，对我来说似乎完美地工作了？ - Fizzix

这在Safari 7.0.6上会出问题。地图全是灰色的。 - Fred K

@FredK - 你用 Mac 还是 Windows？ - Fizzix

Chrome 40在Yosemite上出现了问题，当然Safari也是。 - Sandile

Answer 2

我必须这样做：

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

- Simon Hansen

Answer 3

我在编写CSS时使用了WebKit遮罩，并将一张图片作为遮罩来解决这个问题。

#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/上看到一个工作示例。

- Diamantatos Paraskevas