6

I need to make my google map V3 a full circle. I use CSS3 border radius on it, but it works correctly in Firfox only, others just leave it rectangular. Here are the codes:

<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>

and CSS:

.map.mapCircle {
    width: 476px;
    height: 476px;
}
.mapCircle>div>div:first-child {
    -moz-border-radius: 238px;
    -webkit-border-radius: 238px;
    border-radius: 238px;
}

Yes, I know, I could use some overlay images with background color. But the real problem is that background is not only-color. It changes based on its content, and usually is a gradient. Is there a way to make Chrome and other wabkit-based browsers and Opera (I don't have any hopes about IE) to render it same way as FF does?

My site. Look to the very bottom of the page.

UPD: just tested in IE9, and it renders OK. What's wrong with the webkit and Opera?

UPD 2: I used OverZealous's andwer and figured out that it works only in Safari. Chrome assepts PNG masks only, Opera is not webkit at all. Any more ideas are needed

jeff
  • 8,300
  • 2
  • 31
  • 43
Bardt
  • 695
  • 1
  • 8
  • 17
  • Your link is to `localhost` - which doesn't help much. – OverZealous Aug 01 '11 at 05:18
  • Unfortunately, your link is dead. I'd like to show this to my client as a proof of concept... would you be so kind? – Mateng Jan 11 '12 at 23:56
  • Just updated the link in the post. Look at the very bottom, there should be 2 maps. Or on this page: http://xn--80agcehhdd1an9n.xn--p1ai/index.php?id=4 – Bardt Jan 16 '12 at 06:05
  • Anyone got an answer to get this working in Opera? – Benjamin Intal Mar 22 '12 at 12:27
  • One problem is that you cover up the Google Logo this way, which violates the terms of service. – Mano Marks Apr 25 '12 at 19:21
  • Yup, a bit. Maybe I could somehow relocate the logo to make it visible. – Bardt Apr 27 '12 at 05:25
  • possible duplicate of [Is there any trick to put rounded corners on a Google map?](http://stackoverflow.com/questions/4579330/is-there-any-trick-to-put-rounded-corners-on-a-google-map) – FoamyGuy Jul 01 '12 at 16:10
  • Try this answer http://stackoverflow.com/questions/16292026/css3-rounded-corner-with-google-map/30523342#30523342 – teradyl Aug 10 '16 at 01:11

1 Answers1

15

It appears that you may be experiencing the same Webkit bug as noted here: Rounded corners fail to cut off content in webkit browsers if position:relative

Also here: CSS3 border-radius clipping issues

I tested this by (via a debugger) modifying your code to add a visible border to the node with the border radius, then I hide the contents. It clearly showed a circle for the outer element. Since Webkit is used in both Safari and Chrome, that would explain those. However, when testing it inside Opera, I seem to be seeing the same bug.

Now, some good news: you might be able to get Webkit to behave using -webkit-mask and an SVG circle. There is an example on this page: http://www.webkit.org/blog/181/css-masks/

This would get you support under Firefox, Safari, and (hopefully) Chrome. (And apparently IE9, since you just tested it!) Which, for all accounts, is about the best you can usually hope to achieve for CSS3 hacks. ;-)

Community
  • 1
  • 1
OverZealous
  • 39,252
  • 15
  • 98
  • 100