Mac OS X has a problem with the way it renders text. It’s been bugging me for quite a while. Khoi Vinh noticed it in May 2005. In a nutshell, too much anti-aliasing is applied to some text, making it look blurry and generally not very nice. Take a look at the Communities links at the end of this post by Ascetic Monk on 9rules (where he’s talking about this exact problem) and you can see it in action if you’re on a (newish) Mac.
Jeff Croft noted on Khoi’s post that a change in Preferences and a reboot can solve the problem at an OS level. But this solution, while useful to me, doesn’t help visitors to my sites. So here’s a quick and bizarre CSS hack that fixes the problem (in Firefox):
body { opacity: 0.99999 }
Give it a go on your site or check out the demo page for the fix. The opacity property is defined in CSS3 and supported by recent versions of Firefox and Safari. I’ve used the value of 0.99999 because it’s the closest you can get to being opaque without actually being opaque (and the hack doesn’t work with an opacity value of 1.0).
Caveats
First of all, this fix only works with Firefox; unfortunately it has no effect on the problem in Safari. Second, the fix itself is buggy. With no floats on the page, it seems to work only when the property is applied to a top-level element (like body). But with floats (like on the demo page), the property will solve the rendering problem when applied to an element at any level. But forget that for now because the third and most important difficulty with this fix is that it relies on a (so far) non-standard property, which will not validate. This means that for most it’s simply out of the question. Anyone got any alternatives? It’s not really much use anyway if it doesn’t work with Safari. Ideally, Apple would simply fix their crap text rendering default and there’d be no need for such hacks.
10 Comments
Wow, this is a strange one. I am going to address firefox/camino first. This fix actually works if you set an opacity value less than 1 on *any* element on the page. For example I can put an image on the page, set the opacity value to 0.1 (or anything less than 1) and the fix is implemented, you don’t need to mess with opacity on any other elements.
Safari/Opera is a different story
The above scenario has no effect on the text rendering in Safari/Opera but if you set a paragraph’s (or body or any container tag with text in it) opacity to 0.99999 then the text is given less weight (which is the desired effect) but the text becomes quite jagged.
Also, I can’t find an instance where floating the container div makes a difference.
Appologies if that sounds a bit convoluted, here’s a quick example page based on the one you have linked to in your post: http://www.davejeffery.com/testing/mac-os-x-text-problem-fix.htm
Finally somebody notices this other than me. I have no other solution, but the opacity: .9999; or any of those variants seems to break support with flash. If flash is on the page in any way than it will dissapear when you scroll on the page. Weird as hell, but for the site I’m working on now renders this fix out of the question.
finally! correct the preferences helped. the CSS hack is off course not the solution (rendering opacity takes also a lot of CPU). i am wondering what the default of text smoothing is? do most people see it buggy?
nice! great idea!
i have the last iMac intel and i have this ‘bug’ too. i noticed that coming out when you have light texts on dark backgrounds
Using the fix messes up certain layers that are already using opacity settings unfortunately
Finally. I feel so much better knowing that I’m not going crazy.
I’ve noticed this, but it’s only on the right-hand side of my iBook G4 screen. It comes and goes. Sometimes it’s only, say, the right 1/4 of the screen. It’s irritating the hell out of me, as it got worse a few months ago. Anyone know if this is still the same problem? Until now, I’ve assumed that something in my screen was wonky.
Oh man thanks a lot: i was searching solutions for this problem since i was a child :-)
The problem I was having, with just one part of the screen showing up bold, seems to have been solved by removing the Google Toolbar. At least now I know it’s not a hardware problem.