Question

This is the website.

I have an strange “text display” error that it’s only happenning on Chrome in Mac OSX. I have tried it in 5 iMacs and Macbook and all show the text in a bad way. I know in Windows Chrome it looks good…

I have a submenu that is high enough to be over a API Google Map I put on the page. The problem is that if the submenu is over the map, the text (which has white css property!) changes to a grey diffuse style.

Here is the CSS:

#contact_map{
    width: 537px;
    height: 340px;
    float: left;
}

#map_canvas{
    width:100%; 
    height:100%;
}

#header #header_box ul#mainnav ul.submenu.big .submenu_big_box li a {
      text-transform: none;
      font-size: 12px;
      color: white;
}

And this is the problem:

How it should look (just white font):

You can see that is the Google map the one that is making the error if you remove the float:left property from #contact_map. The maps goes down and the the text shows in it’s white color.

I have tried with all other browsers and it seems it only happens on Chrome in Mac OSX, any ideas on how to fix this?

Answer 1

It looks odd to me on a MBP with Chrome. I think this is what you want:

-webkit-text-stroke: 0.35px

Source: Beefing Up Dull Text in WebKit

With that, it looks like this: