Firefox: Problem rendering text with shadow css

From FVue
Jump to: navigation, search


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 }
  <p>Hello, world!</p>
  <p class="shadow">Hello, world!</p>

renders the second paragraph unreadable:

Firefox problem css shadow.jpg

whereas on Chrome-12.0 it renders ok:

Chrome shadow ok.jpg


  • Firefox-6.0.2
  • Ubuntu 10.04
  • KDE-4.4.5


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.

See also



blog comments powered by Disqus