Firefox: Problem rendering text with shadow css

From FVue
Jump to: navigation, search

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:

Firefox problem css shadow.jpg

whereas on Chrome-12.0 it renders ok:

Chrome shadow ok.jpg

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.

See also

Firefox:_Problem_rendering_text_with_opacity_css

Comments

blog comments powered by Disqus

Retrieved from "https://fvue.nl/w/index.php?title=Firefox:_Problem_rendering_text_with_shadow_css&oldid=9674"