仅在OSX中发生

在我的导航中,我有一个用css和jQuery完成的子菜单:

(这仅在OSX中发生,我在大多数主流浏览器上的OSX Lion 10.8中都尝试过)
当存在谷歌地图时,该子菜单的字体没有缩小,但看起来更细,我一直在研究,可能是字体平滑或字体粗细,但我没有设法解决它。

我在jsfiddle中提取了我的代码,因为它足够大,让人感到困惑,同时提取了HTML css和javascript,我试图将代码最小化,以便于您使用。还添加了两个按钮,它们具有非常简单的功能来添加和删除Google地图,因此您可以看到问题,甚至不必刷新:

http://jsfiddle.net/SGWMx/

我几乎可以肯定问题出在gmap / css上,当我隔离它时,启动了一个空白页并开始删除东西,直到得到它为止。正如您在示例中所看到的,我大量削减了javascript,即使google map的加载也是非常基本的,即使这样也会弄乱我的字体。

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


也不是字体本身,因为在我的计算机上,我实际上正在使用其他字体,只需将其设置为helvetica / arial即可兼容

仅在OSX中发生

最佳答案

好的,所以实际的问题是-webkit-transform: translateZ(0);上的#map_canvas属性,它是子级。不幸的是,您无法删除它;它由Google Maps使用。

这个答案可能使您对正在发生的事情有所了解:How to prevent Webkit text rendering change during CSS transition

因此,根据我的评论,唯一真正的解决方案是避免使用subpixel-aliased

html {
    -webkit-font-smoothing: antialiased
}

关于css - OSX10.8加载谷歌 map 时的字体大小/平滑螺钉,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13608036/

10-11 23:11
查看更多