Firefox: Problem rendering text with shadow css

Problem

Text with css property text-shadow applied, renders unreadable in Firefox.

For example, this html:

<html><head><style type="text/css">
  .shadow { text-shadow: 0 1px 1px black }
</style></head><body>
  <p>Hello, world!</p>
  <p class="shadow">Hello, world!</p>
</body></html>

renders the second paragraph unreadable:

whereas on Chrome-12.0 it renders ok:

Environment

Firefox-6.0.2
Ubuntu 10.04
KDE-4.4.5

Solution

The problem seems to be caused by the sub-pixel rendering of the fonts anti-alias settings, especially the "Vertical RGB" setting.

The problem disappears if I change "Vertical RGB" to "RGB", "BGR", or "Vertical BGR" for { KDE | System Settings | Fonts | Use anti-aliasing "Enabled" | Configure | Use sub-pixel rendering }.

The problem also disappears if I disable sub-pixel rendering.

Problem

Environment

Solution

See also