In Webkit Browsers, V3 Google Maps Do Not Respect Container's Border-Radius. Anyone Have a Workaround

In webkit browsers, v3 google maps do not respect container's border-radius. Anyone have a workaround?

This appears to be fixed, so it's no longer an issue. You can verify that a map container's border-radius style is indeed respected, using the v3 map API, at this fiddle.

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

Is it safe to drop the -webkit vendor prefix from the css3 border-radius yet?

Yes, I believe it's safe to drop it.

See: https://developer.mozilla.org/en/css/-moz-border-radius

Lowest version for unprefixed "border-radius"
Safari | Chrome | WebKit  
5.0    | 4.0    | 532.5

So, it's safe to drop if you don't care about users running older versions of Safari/Chrome.

Not many users are running old versions of Safari/Chrome - these browsers aren't IE, where older versions are sometimes clung to for aeons.

Users running these browsers are often savvy enough to update, and both Safari and Chrome aggressively try to update themselves (Chrome even does it automatically).

Also, http://css3generator.com/ has dropped it. (the top Google result for "css3 generator")

Rounded corners fail to cut off content in webkit browsers if position:relative

span.outer{
    position:relative;
}

div.outer {
    background:yellow;
    border:solid 1px black;    
    overflow:hidden;    
    -moz-border-radius: 12px;
    border-radius: 12px;   
}

.inner {
    background:red;
    height:50px;
}

<span class="outer">
    <div class="outer">
        <div class="inner">
        </div>
    </div>
</span>

CSS Border radius not trimming image on Webkit

Webkit cannot handle border-radius cropping for children and grand-children+. It's just that bad. If you want border cropping, it has to be directly on the div the image is placed on without going any deeper down the hierarchy.

Sticky cursor with google maps embedded in iframe (webkit browsers and IE)

I'm not entirely certain what event Google Maps relies on in order to stop dragging the map, but just in playing around with your demo I noticed that it stops when you mouseup inside the iframe. If you simulate this event on mouseout of the iframe, Google Maps thinks you let go of the map there, and stops dragging.

I tried this code from inside the console and it works fine:

var iframe = document.getElementsByTagName('iframe')[0];
iframe.addEventListener('mouseout', function(e){
    var doc = this.contentDocument || this.contentWindow; // wk/moz vs. ie
    doc = doc.document || doc; // opera
    if (doc.createEvent) {
        var evt = doc.createEvent('MouseEvents');
        evt.initMouseEvent('mouseup', true, false, window, 
            0, e.screenX, e.screenY, e.clientX, e.clientY, 
            false, false, false, false, 0, null
        );
        doc.getElementsByTagName('body')[0].dispatchEvent(evt);
    } else if (doc.createEventObject) { // legacy ie
        var evt = doc.createEventObject(e);
        doc.getElementsByTagName('body')[0].fireEvent('mouseup', e);
    }
});

This works in FF, Safari, Chrome, and Opera. I took a quick look at your page in IE without applying the fix. However, it doesn't look like the drag bug is even happening there, so it may not be worth providing for that case. Good luck!

How do I prevent an image from overflowing a rounded corner box?

This may or may not work in your situation, but consider making the image a CSS background. In FF3, the following works just fine:

<div style="
  background-image:   url(big-image.jpg);
  border-radius:      1em;
  height:             100px;
  -moz-border-radius: 1em;
  width:              100px;"
></div>

I'm not sure there's another workaround — if you apply a border to the image itself (say, 1em deep), you get the same problem of square corners.

Edit: although, in the "adding a border to the image" case, the image inset is correct, it's just that the image isn't flush with the div element. To check out the results, add style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" to the img tag (with width and height set appropriately, if necessary).

---

Related Topics