Trying to create a circular Google map using CSS3 border-radius, but having issues with browsers other than Firefox. Here's the code snippet:
<div class="map mapCircle" style="position: relative; background-color: transparent; overflow: hidden;">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%;">
...
</div>
</div>
</div>
Here is the CSS being used:
.map.mapCircle {
width: 476px;
height: 476px;
}
.mapCircle>div>div:first-child {
-moz-border-radius: 238px;
-webkit-border-radius: 238px;
border-radius: 238px;
}
Considering using overlay images for a workaround, but facing challenges due to gradient background that changes based on content. Seeking advice on how to make Chrome, Safari, and Opera render it consistently like Firefox does.
View my site for reference at the bottom of the page.
Update: Tested in IE9 and rendering correctly. Need help with webkit-based browsers and Opera.
Update 2: Following OverZealous's suggestion, discovered only Safari renders as expected. Chrome requires PNG masks and Opera isn't using WebKit. Looking for more solutions.