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

Question

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.

Answer 1

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