iPad 和 iPhone 上的边框半径答案

【问题标题】：Border Radius on iPad and iPhoneiPad 和 iPhone 上的边框半径
【发布时间】：2014-07-23 12:42:56
【问题描述】：

我在 iPhone 和 iPad 上遇到了边框半径问题。我正在尝试生成一个圆形的 googlemap，它在每个浏览器和除 ios 之外的每个系统上都可以正常工作。到目前为止我所做的是，我有一个地图画布

<div class="col-sm-4"><div id="map_canvas"></div></div>

还有我的css

#map_canvas {
    height:474px;
    width:474px;
    border-radius:237px;
    margin-bottom:73px;
    display: block;
    overflow:hidden !important;
    position: relative !important;
}

这不起作用后，我尝试添加更多边框半径：

.gm-style {
    height:474px;
    width:474px;
    border-radius:237px;
    overflow:hidden !important;
}
#map_canvas .gm-style > div {
    border-radius:237px;
}

但仍然没有成功。这是一个活生生的例子： http://kristinwalzer.at/website/kontakt.php

有人知道这个问题吗？或许还有解决方案？

【问题讨论】：

标签： html ios css

【解决方案1】：

为圆盒再添加一个div，并为该圆盒添加属性

<div class="col-sm-4">
   <div class="roundBox">
      <div id="map_canvas"></div>
   </div>
</div>


.roundBox{
    height:474px;
    width:474px;
    border-radius:237px;
    overflow:hidden !important;
    position: relative !important;
    z-index: 999; 
}

#map_canvas {
    height:474px;
    width:474px;
    display: block;
    border-radius:237px;
}

【讨论】：

你还需要将border-radius:237px;添加到#map_canvas
我可以看到圆圈，但是在加载地图的那一刻，边界半径消失了。第二个overflow:hidden 也无济于事。
您需要将border-radius:237px; 添加到.roundBox 和#map_canvas 中
让我们continue this discussion in chat。
至少不在我的 iPhone 上 :(

【解决方案2】：

我找到了这个In webkit browsers, v3 google maps do not respect container's border-radius. Anyone have a workaround?

这篇文章中的所有小提琴都不适用于 safari（windows 和 ios）。但即使他们在那个问题上说它已经解决了，但事实并非如此。看起来像 Googlemap V3 错误。

【讨论】：