Question

Only happens in OSX

In my navigation I have a submenu, done in css and jQuery:

(This happens only in OSX, I tried in OSX Lion 10.8, on most major browsers)
When there is a google map present, the font of that submenu got “shrinked” not in size, but looks thiner, I’ve been researching a bit and could be the font-smoothing or the font-weight, but I didn’t manage to fix it.

I have in a jsfiddle an extract of my code because it’s big enough to get people confused, both the html css and javascript are extract, I tried to minimalize the code to make it easier for you guys. Also added two buttons with a very simple function to add and remove the google map, so you can see the issue, you don’t even have to refresh:

http://jsfiddle.net/SGWMx/

I am mostly certain that the problem is with the gmap/css, as I isolated it, started a blank page and started to remove things until I got it. And I cut down the javascript a lot as you can see in the example, even the google map loading is very basic, even so it’s screwing my font.

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

Also it’s not the font itself, as on my computer I was actually using another fonts, just set it to helvetica/arial for compatibility

Only happens in OSX

Answer 1

OK, so the actual issue is the -webkit-transform: translateZ(0); property on #map_canvas and it’s children. Unfortunately you can’t remove this; it’s used by Google Maps.

This answer might give you an idea into what’s happening: How to prevent Webkit text rendering change during CSS transition

So, as per my comment, the only real solution is to avoid using subpixel-aliased.

html {
    -webkit-font-smoothing: antialiased
}