iframe上的邊界半徑不適用於MAC（Safari）

Question

我正面臨CSS問題。 當我嘗試在寡婦上正常工作時，border radius on在Mac book（Safari）上不起作用。

這是我的html

   <div class="map">
       <div class="map-border">    
          <iframe width="295" height="295" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3160.515465008442!2d-122.40503609999998!3d37.6135611!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808f77776e3c0101%3A0x78bd162ebe8e8904!2s1699+El+Camino+Real+%23201!5e0!3m2!1sen!2s!4v1403695117548">

        </iframe>
   </div>

這是我的CSS代碼。

        .map {
width: 315px;
height: 315px;
overflow: hidden;
position: relative;
border: 10px rgba(0, 0, 0, 0.1) solid;
-webkit-border-radius: 190px;
-moz-border-radius: 190px;
-ms-border-radius: 190px;
-o-border-radius: 190px;
border-radius: 190px;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in; 
z-index: 10;
}
.map .map-border {
  position: absolute;
  overflow: hidden;
  height: 295px;
  border: 10px white solid;
  -webkit-border-radius: 190px;
  -moz-border-radius: 190px;
  -ms-border-radius: 190px;
  -o-border-radius: 190px;
  border-radius: 190px; 
  overflow: hidden;
  z-index: -10;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  }

 iframe {
-webkit-border-radius: 190px;
-moz-border-radius: 190px;
-ms-border-radius: 190px;
-o-border-radius: 190px;
border-radius: 190px;
border: 0; 
display: block;
}

這是實時代碼。 http://jsfiddle.net/adnan00733/ju9zL9um/注意：在Windows上看起來會很好。 但不幸的是，它不適用於MAC。

請幫忙。 提前致謝。

Answer 1

好的，我能想到的最佳解決方案是：

1. 將圖像放在地圖頂部。 在這種情況下，您可能無法訪問地圖。

2. 在地圖的每一側放置四張圖像，即一張。 不是最漂亮的解決方案，但只要它能起作用...））

（如果需要，我可以將圖像切成碎片）