jquery ui對話框沒有出現在谷歌地圖v3的頁面上

在某些版本的iPad/iOS Safari上，在Google地圖的同一頁面上使用jQuery UI對話框似乎存在問題。jquery ui對話框沒有出現在谷歌地圖v3的頁面上

下面的代碼顯示一個地圖，下面有一個鏈接。點擊鏈接應該彈出一個基本的jQuery UI對話框。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true"></script> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 
<style type="text/css"> 
#mapcontainer { 
    width:50%; 
    height:300px; 
} 
</style> 
</head> 
<body> 

<!-- ## Map Container ## --> 
<div id="mapcontainer"></div> 

<!-- ## Show Dialog ## --> 
<a id="showdialog" href="#">Show Dialog</a> 

<!-- ## Dialog ## --> 
<div id="mydialog"></div> 

<script type="text/javascript"> 
jQuery(function($){ 
    initMap(); 
    $('#showdialog').click(function(event){ 
     event.stopPropagation(); 
     $('#mydialog').dialog(); 
    }); 
}); 

function initMap() { 
    if (google.maps != null && typeof google.maps === 'object') { 
     var mapOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(-34.397, 150.644), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('mapcontainer'), mapOptions); 
    } 
} 
</script> 

</body> 
</html>

它似乎可以在較新的桌面瀏覽器和Android設備（本地瀏覽器和Chrome）上正常工作。然而在iPad（iOS 5.1.1 Safari）上，點擊鏈接時沒有任何反應。在iOS模擬器上，它似乎在iOS 6.1中的Safari上正確運行，但在5.1或更低版本中運行正常。

一個可行的辦法似乎是使用這樣的事情在CSS給力3D加速：

*:not(html) { 
    -webkit-transform: translate3d(0, 0, 0); 
}

但看來這可能會導致在圖形元素重頁等問題。

有沒有其他方法可以更安全？

來源

2013-04-04 Mrnt

.ui-dialog * { 
    -webkit-transform: translate3d(0, 0, 0); 
}

我歡迎你。實際上你節約了我的一天。 =）

來源

2013-05-13 14:23:49

jquery ui對話框沒有出現在谷歌地圖v3的頁面上

回答

相關問題