In webkit browsers, google v3 maps do not take into account the border radius of the container. Does anyone have a workaround?

Question

I have two google maps. The first is created using the Google Maps API (v3) and is contained in # map1. The second is displayed in the iframe using the recommended Google syntax and is contained in # map2.

Here's the fiddle: http://jsfiddle.net/wmcmeans/mPGWx/7/

Here are the snippets:

<div id="map1" class="gmap left bling"></div> <iframe id="map2" class="gmap right bling" height="425" width="550" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;q=augsburg+germany&amp;ie=UTF8&amp;hq=&amp;hnear=Augsburg,+Bavarian+Swabia,+Bavaria,+Germany&amp;t=h&amp;ll=48.451123,10.862346&amp;spn=0.004981,0.00912&amp;z=16&amp;output=embed"></iframe> 

Here's the problem: Google maps created from the v3 API do not take into account the borders of a container using the border radius style when viewed in a webkit-based browser. The iframed (embed) method does not show the same drawback.

Tested well:

FireFox v 19.0.2 (Windows 7)

FireFox v 32.0.3 (Windows 8.1)

IE9 v 9.0.8112 (Windows 7)

IE11 (Windows 8.1)

Failed:

Chrome v 25.0.1364.160 m / Safari (Win / 32) v 5.0.3 / Opera v 11.64 (Windows 7)

Chrome v 38.0.2125.104 m (Windows 8.1)

Version 2 cards are outdated, not an option. I would like to create v3 maps only with CSS, without graphics or overlays. I am looking for a workaround for webkit rendering problem. (I already opened Chromium Issue # 187187 for this, which still needs to be seen almost a year later).

Answer 1

This seems to be fixed, so this is no longer a problem. You can make sure that the border-radius style in the map container is really respected using the v3 API on this fiddle .

 <div id="map3" class="gmap"></div> 

Answer 2

Here is the solution: http://jsfiddle.net/alxscms/3Kv99/

I use a few extra add-ons to achieve this that I don’t like so much, but that was the only possible way for me.

 <div class="wrapper"> <div class="map" id="map"></div> <i class="top"></i> <i class="right"></i> <i class="bottom"></i> <i class="left"></i> <i class="top left"></i> <i class="top right"></i> <i class="bottom left"></i> <i class="bottom right"></i> </div> 

My goal was to have an inner border and rounded corners, but you can set the border thickness to 0 and there will only be rounded corners on the map. This works on FF, Chrome and IE. I have not tested Opera or Safari.

Answer 3

This worked for me:

 -webkit-transform: translate3d(0px, 0px, 0px); -webkit-mask-image: -webkit-radial-gradient(white, black);