What steps will reproduce the problem? 1. Open the site on Chrome

What is the expected output? It should look snappy like it does in IE and Firefox.

What do you see instead? It's grainy and blurry like a bad interpolation from one resolution to another. See attachment. All pages on the site have this bad quality.

What version of the product are you using? Chrome 12.0.742.100 (Google confirms its the latest version.)

On what operating system? Windows XP 32 bit

Please provide any additional information below. I feel for you. This is an odd one. I don't think I've ever seen Chrome goof up a page that looks fine on IE and Firefox. I know you have good testing in place, but this type of bug would require one of the more exotic tests of comparing screen captures and those are labor intensive and brittle, usually not worth the bang for the buck.

My bet is Chrome choking on CSS.

This works correctly on Chrome running on Windows 7, Linux, and Mac. The issue is on Windows XP. The problem here is bad font hinting.

Spiffy UI uses special fonts from TypeKit and the two fonts we're using don't have proper hinting for Windows XP. This doesn't matter on the other platforms where they have better hinting in the rendering engine. This is a common problem with pages that use fonts other than the standard web fonts.

This issue affect SpiffyUI.org, but not the Spiffy UI framework.

I'm not sure what the right fix is for this issue. The only thing we can really do is detect what operating system you have and fall back to a font with better support on Windows XP. This means doing a separate design for a platform and browser combination which represents a pretty small portion of our traffic.

We'll have to think a little more about the best solution here.

Zack,

Thanks, good to know. I'm not really hung on this. You own Spiffy; whatever you decide is good. Here are some options in order of increasing cost:

1. Do nothing. To do much, one must do nothing. That is the path of Zen understanding.
2. Doc it. It's not a bug. Your requirement is out of scope according to readme. RTFM
3. Delay indefinitely because you have higher priorities, including improving Spiffy UI in other ways.
4. Will CSS skip a bad hinting font and go to the next choice? font-family: "badHintingFontForChromeOnXP", "Times New Roman",Georgia,Serif;
5. On page load, if client is on badHinting list, popup message Technical Message: Chrome on Windows XP has bad font hinting. \nTranslation for Normal Folks: Dude, it's 2011. Get a real machine. I'm just saying.
6. On page load, if client is on badHinting list, use JavaScript to change CSS.
7. Downgrade the fonts to the lowest common denominator. You're an artist. It'll kill you. You're also an engineer. You might survive.
8. Detect server side, serve up two different designs. Even if you survive #7, this one will definitely finish you off.

As a veteran and victim of past browser wars, I advise coming up with a policy to answer #1. Here's a sample one I worked out with the business owners of Sundance Catalog: boolean mustFix(String browserClientVersion) { if (browserClientVersion is less than 2% of total browser usage according to favorite web tracking site for each of last 3 months) return false;

 return true;

} Maybe things have improved to the point that this decision is rare. Back in the day, having a policy removed analysis paralysis and emotion (particularly important when the CEO's mother's browser was old--straight up).

~David

Spiffy UI already has the ability to load different style sheets based on the browser or operating system. I've added a new style sheet for Chrome on Windows XP which changes the fonts to something that will render better on that platform.

I've deployed it to our staging server (http://spiffyui-staging.appspot.com/) and it will be deployed to SpiffyUI.org soon.

Committed revision 1354.