OSX10.8字體大小/平滑擰當加載谷歌地圖

在我的導航我有一個子菜單隻發生在CSS和jQuery做：

（這種情況僅在OSX，我試過OSX Lion 10.8，在大多數主流瀏覽器上）當有谷歌地圖存在時，該子菜單的字體得到「縮小」不在大小，但看起來更細，我一直在研究一下，可能是字體 - 平滑或字體重量，但我沒有設法修復它。

我在jsfiddle中提取了我的代碼，因爲它足夠大讓人困惑，html css和javascript都被解壓縮，我試圖最小化代碼以使其更容易。還增加了兩個按鈕，一個非常簡單的功能添加和刪除谷歌地圖，這樣你就可以看到這個問題，你甚至不必刷新：

我大多肯定，問題是用gmap/css，當我隔離它時，開始了一個空白頁面，並開始刪除東西，直到我得到它。我在示例中看到了很多JavaScript，即使google地圖加載也是非常基本的，即使如此，它也在搞亂我的字體。

function initialize(){ 

    var coords = new google.maps.LatLng(55.378051, -3.43597299999999); 

    var mapOptions = { 
     zoom: 5, 
     center: coords, 
     mapTypeId: google.maps.MapTypeId.HYBRID 
    }; 

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
}

而且它不是字體本身，因爲我的電腦上我其實是用另一種字體，只需將其設置爲黑體/ Arial字體兼容性

只發生在OSX

來源

2012-11-28 aleation

看起來像添加地圖將'-webkit-font-smoothing：subpixel-aliased'的字體呈現更改爲'-webkit-font-smoothing：antialiased'。如果將後者添加到'body'或'html'，[添加地圖時不會改變]（http://jsfiddle.net/SGWMx/1/）。仍然試圖找出它爲什麼會發生。 –

OK，所以實際問題是#map_canvas上的-webkit-transform: translateZ(0);屬性及其子節點。不幸的是，你不能刪除它;它由Google地圖使用。

這個答案可能會給你一個想法到發生了什麼：How to prevent Webkit text rendering change during CSS transition

所以，按照我的意見，唯一的解決方法就是避免使用subpixel-aliased。

html { 
    -webkit-font-smoothing: antialiased 
}

來源

2012-11-28 15:33:20

我看到了，所以使用谷歌地圖迫使我們停止使用亞像素抗鋸齒...我會嘗試找到一個解決方案使用JavaScript左右，也許強制它在地圖加載和閒置後，無論如何，這有助於很多，謝謝你！ – aleation

OSX10.8字體大小/平滑擰當加載谷歌地圖

回答

相關問題