Question

我正在尝试在Safari中剪辑Google地图。我使用的CSS在Chrome和Firefox中运行良好。请参阅此fiddle

<head>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
        function initialize() {

          var myLatLng = new google.maps.LatLng(-33.887097, 18.511804);
          var mapCanvas = document.getElementById('map_canvas');

          var mapOptions = {
            center: myLatLng,
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true
          }

          var map = new google.maps.Map(mapCanvas, mapOptions);

          var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,  
          }); 
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>


<body>

<div style="width:260px; height:260px; position:absolute; left:0; right:0; top:60px; margin:auto;">
            <div id="map_canvas" class="map_container"></div>
        </div>

</body>

.map_container {

  width:260px; 
  height:260px; 
  overflow:hidden; 

  border-radius: 50% !important;
  border: 1px solid black !important;
}

如何让地图在Safari中剪辑并保留边框？

Answer 1

尝试使用此

JS Fiddle

为容器添加border而不是.map_container

.container {
    border-radius:50%;
    border:1px solid #000000;
}
.map_container {
    width:260px;
    height:260px;
    overflow:hidden;
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black); /** added mask image **/
    border-radius: 50% !important;
    /*border: 1px solid black !important;*/
}

了解有关translatez(0)

的更多信息

在Safari中发布剪辑谷歌地图

1 个答案: