Firefox: Problem rendering text with opacity css

From FVue
Jump to: navigation, search

Problem

Text with css property opacity applied, renders unreadable on Firefox.

For example, this html: 

<html><head><style type="text/css">
  .opaque { opacity: 0.8 }
</style></head><body>
  <p>Hello, world!</p>
  <p class="opaque">Hello, world!</p>
</body></html>

renders the second paragraph unreadable:

Firefox problem css opacity.jpg

whereas on Chrome-12.0 it renders ok:

Chrome opacity ok.jpg

Environment

  • Firefox-3.6.18, 3.6.20
  • Ubuntu 10.04
  • KDE-4.4.5

Solution

From this thread it appears one can specify css "color: rgba" or specify a background color.

Solution 1. Css color rgba

.opaque { color: rgba(0, 0, 0, .8) }

Solution 2. Css background-color

.opaque { background-color: white; opacity: 0.8 }

See also

CSS gray text opacity and Firefox problem - color issue - Stack Overflow
Thread with solution. Solution is to use css "color: rgba" or specify a background color.
Firefox text opacity background issue - Stack Overflow
Thread discussing it appears to be a Firefox on Linux problem. A background color is injected?

Comments

blog comments powered by Disqus

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