Question

我正在尝试创建一个带有Google地图的jQueryUI对话框。我在公司应用程序的许多其他地方使用了对话框周围的框阴影，没有任何问题。现在，通过对话框中的Google地图，框阴影留下了痕迹。该问题仅出现在Chrome中，当我切换到其他标签并再次返回时，该问题将清除。

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

我做了一个测试来证明自己the problem was not with jQueryUI draggable。

And here is the link to a fiddle that presents the issue.同样，这只会破坏Chrome。

Answer 1

尝试将-webkit-backface-visibility: hidden;添加到.ui-dialog。

Box-shadow使用Chrome在jQueryUI对话框中使用Google Map留下痕迹

1 个答案: