Issue clipping Google Map in Safari

Question

I am trying to clip a Google Map in Safari. The CSS I have used works well in Chrome and Firefox. Please see this 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;
}

How can I get the map to clip in Safari and still retain the border as well please?

Just a side note on this: you are violating Google's Terms of Service by displaying a map this way because you are not supposed to: *(ix) delete, obscure, or fail to display the Terms of Use link as presented through the Service or described in the Maps APIs Documentation; (x) delete, obscure, or in any manner alter any brand features, logos, warnings, notices (including but not limited to any copyright or other proprietary rights notices), or links that appear in the Service or the Content;* See https://developers.google.com/maps/terms — MrUpsidown, Oct 22 '14 at 14:33

score 1 · Accepted Answer · edited May 23 '17 at 12:06

try using this

JS Fiddle

added border for container insted of .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;*/
}

to know more about translatez(0)

Issue clipping Google Map in Safari

1 Answers1