First question on Stack for me I've done my homework and found something like this topic
but still I see the issue..so here I am. I'm embedding google maps in one project of mine and want to clip it in a circle shaped frame.
While the solution I used works great on chrome and Firefox I just discovered doing some test that Safari does not render border radius on a "clipping" container, allowing the underneath google map content to overlap the rounded corners.
The odd thing is that this behaviour does apply only on Safari. While on chrome it works pretty fine..
You can check it out your self opening this fiddle in safari and chrome and you will immediately spot the difference (mind the corners)
http://jsfiddle.net/wmcmeans/YHX6c/
The fiddle from MAC is pretty evident: just try into different browser.
Here is the code structure used in the fiddle that mirrors the one I used in my project
<div id="map1" class="clip">
<!--MAP GOES HERE--->
</div>
.clip {
overflow: hidden;
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.55) 10px 20px 20px;
border: 1px solid red;
}
NOTE: The clipping effect with border radius works on Safari Version 7.0.3 if inside the .clip div we have a static image as a background
Hope someone has some simple workaround :)
thanks and Ciao