CODEWITHSUNDEEP
cssgoogle-maps-api-3safari
RunLoop
RunLoop

Reputation: 20376

Issue clipping Google Map in Safari

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?

Upvotes: 1

Views: 1140

Answers (1)

Vitorino fernandes
Vitorino fernandes

Reputation: 15971

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)

Upvotes: 1

Related Questions