Letters seem to be rendered incorrectly in Firefox

2

So, when I'm browsing in firefox, some letters look grainy or glowing, does anyone know what might be causing this? It doesn't show on all websites, only some. It almost looks like Firefox is trying to render different font colours on top of each other and blends them in the process somehow.

Using Firefox 3.6.13 on Windows 7 Ultimate 64 bits and the problems also arrise when running Firefox in safe mode.


http://facelift.mawhorter.net/ (top menu)
IE 8:
alt text
FF 3:
alt text


https://student.ru.nl/portal/dt (center notification)
IE 8:
alt text
FF 3:
alt text

BloodPhilia

Posted 2010-12-22T16:25:53.527

Reputation: 27 374

Which operating system is this on? – Matthieu Cartier – 2010-12-22T16:30:10.163

@neurolysis I'm running Windows 7 Ultimate 64 bits – BloodPhilia – 2010-12-22T16:31:04.347

2

As an aside: screen captures of text might look odd on different displays too, if the display that is used to see the image uses different pixel orientation than the machine the screenshot was created at, if things like ClearType are used.

– Arjan – 2010-12-22T16:39:12.450

Well said, indeed that is the case. – Matthieu Cartier – 2010-12-22T17:12:03.233

1For what it's worth, I can reproduce the issue on Windows XP + Firefox 3.6.13 + ClearType. (I ain't turning ClearType off because of it, though - it improves way more things than it worsens.) – Martha – 2010-12-22T21:25:03.093

Answers

3

That looks like a subpixel rending issue. IE8 uses a different subpixel renderer.

These are inherent changes to the browser's rendering engine (Gecko for Firefox, for example) which can't be removed without significant effort. However, Firefox's implementation of subpixel rendering is affected by ClearType, so try going to Control Panel > Fonts > Adjust ClearType text and tweak about a bit -- it should alleviate your issue.

Alternatively, you could try a different font smoothing method like the one implemented in GDI++, see the thread here.

Matthieu Cartier

Posted 2010-12-22T16:25:53.527

Reputation: 3 422

I learned that turning off ClearType removes the glow/grain, but what on a particular website makes it appear that way? Some websites render perfectly and other don't. Even text on the same website renders differently sometimes. Like one paragraph does, and the next doesn't. (Although it's always the same text that does or does not render properly) – BloodPhilia – 2010-12-22T16:45:45.937

Often text-shadow elements cause all sorts of problems like this, with that said, I don't see that on the pages affected (and I don't see the issue, but then again I don't use ClearType ;) ) – Matthieu Cartier – 2010-12-22T16:46:57.987

@neurolysis I'd happily disable it, but without it all my other text will look like **** on my laptop. – BloodPhilia – 2010-12-22T16:49:39.987

It's really really hard to compare sub-pixel rendering with a highly compressed JPEG :/ – davr – 2010-12-22T20:06:09.423

@davr It was a lossless PNG when I uploaded it, it's this site that converted it into a JPEG... :( here it is: http://fakkelbrigade.eu/chris/images/chrome-vs-firefox.png

– Matthieu Cartier – 2010-12-22T20:11:19.043

changed the image to png. – Matthieu Cartier – 2010-12-22T20:51:06.687