A fix for pixelated menus using Typekit fonts...

I ran into an issue where viewers of a site in Safari or Chrome on OS X were seeing a pixelated page menu when first loading the site - until they rolled over the menu. This menu uses Typekit fonts.

Wrote to Typekit about it - and here was their response:

Sorry you ran into trouble here. I just took a look at your site and I can definitely see what you're referring to. It turns out this is a bug with Webkit (the browser engine that powers both Chrome and Safari) on the Mac. When a font is a certain smallness, Mac OS X turns off antialiasing entirely because it's more readable aliased at that size. But this bug causes text near this element to also render without antialiasing.

The solution is to find the CSS that is causing the issue. In the case of your site, I found this:

div.horbar1, div.horbar2 {
clear: both;
display: block;
font-size: 1px;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}

If you change the font-size above to 5px, it will solve the issue. It would look like so:

div.horbar1, div.horbar2 {
clear: both;
display: block;
font-size: 5px;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}

I went looking for it - it was in the page CSS for sure, but not anywhere in the Atahualpa options.

I had to search to find the code. It's in css.php:

/*-------------------- HORIZONTAL BARS --------------------*/

div.horbar1,
div.horbar2 {
font-size: 1px;
clear: both;
display: block;
position: relative;
padding: 0;
margin: 0;
width: 100%;
}


Hope this helps someone!

Best,

Mark