在 webkit 浏览器中，v3 谷歌地图不尊重容器的边界半径。有人有解决方法吗？答案

【问题标题】：In webkit browsers, v3 google maps do not respect container's border-radius. Anyone have a workaround?在 webkit 浏览器中，v3 谷歌地图不尊重容器的边界半径。有人有解决方法吗？
【发布时间】：2013-02-28 09:40:06
【问题描述】：

我有两个谷歌地图。第一个是使用 Google Maps API (v3) 创建的，包含在 #map1 中。第二个使用 Google 建议的嵌入语法显示在 iframe 中，并包含在 #map2 中。

这是小提琴：http://jsfiddle.net/wmcmeans/mPGWx/7/

这里是sn-ps：

<div id="map1" class="gmap left bling"></div>

<iframe id="map2" class="gmap right bling" height="425" width="550" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;q=augsburg+germany&amp;ie=UTF8&amp;hq=&amp;hnear=Augsburg,+Bavarian+Swabia,+Bavaria,+Germany&amp;t=h&amp;ll=48.451123,10.862346&amp;spn=0.004981,0.00912&amp;z=16&amp;output=embed"></iframe>

问题是：在基于 webkit 的浏览器中查看时，从 v3 API 创建的 Google 地图不尊重应用了边框半径样式的容器的边框。 iframed（嵌入）方法没有表现出同样的缺陷。

测试良好：

FireFox v 19.0.2 (Windows 7)

FireFox v 32.0.3 (Windows 8.1)

IE9 v 9.0.8112 (Windows 7)

IE11 (Windows 8.1)

失败：

Chrome v 25.0.1364.160 m / Safari (Win/32) v 5.0.3 / Opera v 11.64 (Windows 7)

Chrome v 38.0.2125.104 m (Windows 8.1)

第 2 版地图已弃用，不是一个选项。我想只用 CSS 来设置 v3 地图的样式，没有图形或覆盖。我正在寻找解决 webkit 渲染问题的方法。（我已经为此开了一个Chromium Issue #187187，差不多一年后，还没有看到）。

【问题讨论】：

可能与stackoverflow.com/a/5746075 重复
我的问题类似，但不是骗人的。我的涉及谷歌地图，而不仅仅是边界半径样式。在我的测试用例中，添加“溢出：隐藏”没有任何改变。 Updated fiddle
更进一步，我使用相同的标记和样式创建了两个小提琴；一个使用谷歌地图 API v2 和另一个 API v3。（我无法让两个版本在同一页面上一起工作。）比较：APIv2 到 APIv3

标签： css google-chrome google-maps-api-3 webkit

【解决方案1】：

这里是解决方案：http://jsfiddle.net/alxscms/3Kv99/

我正在使用几个额外的标记来实现这一点，我不太喜欢，但这是我唯一可能的方法。

<div class="wrapper">
  <div class="map" id="map"></div>
  <i class="top"></i>
  <i class="right"></i>
  <i class="bottom"></i>
  <i class="left"></i>
  <i class="top left"></i>
  <i class="top right"></i>
  <i class="bottom left"></i>
  <i class="bottom right"></i>
</div>

我的目标是有一个内边框和圆角，但您可以将边框粗细设置为 0，这样地图上就只有圆角了。这适用于 FF、Chrome 和 IE。我没有在 Opera 或 Safari 上测试过。

【讨论】：

我同意：我不喜欢在这样的东西上添加一堆额外的标记。您的解决方案似乎不适用于背景图像。如果是这样，我会考虑将其标记为已回答。
是的.. 这仅适用于固定的背景颜色。如果您找到解决方案，请在此处告诉我们！

【解决方案2】：

这对我有用：

-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);

【讨论】：

【解决方案3】：

这似乎已解决，因此不再是问题。您可以在 fiddle 处使用 v3 地图 API 验证地图容器的边界半径样式确实得到尊重。

<div id="map3" class="gmap"></div>

【讨论】：

我还是遇到了这个问题。即使在小提琴中
是的，我明白了。 2014 年 3 月，当我关闭它时，它确实是“固定的”。现在它又坏了（在 Chrome 中，而不是 FF 或 IE 中）。确实还没有完美的浏览器。