Q:

Box-shadow leaves trail with Google Map inside jQueryUI dialog box using Chrome

I am trying to create a jQueryUI dialog box with a Google map inside.  I have used box-shadow around dialog boxes in many other places in my company's application without any issue. Now, with the Google map inside of a dialog box, the box shadow leaves a trail.  The issue only presents itself in Chrome, and the trail will clear when I switch to a different tab and back again.
<div id="mapContainer" title="Drag Me">
    <div id="map">
    </div>
</div>

.
$(document).ready(function () {
var map;
var options = {
    zoom: 6,
    center: new google.maps.LatLng(42, 42),
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], options);

$('#mapContainer').dialog();
});

.
#map {
    height: 200px;
    width: 200px;
}

.ui-dialog {
    box-shadow: #000 5px 5px 5px;
}

I did a test to prove to myself the problem was not with jQueryUI draggable.
And here is the link to a fiddle that presents the issue.  Again, this only breaks in chrome.

A:

Try adding -webkit-backface-visibility: hidden; to .ui-dialog.

