Firefox text opacity background issue

Question

Take a look at this screenshot from Firefox:

The two left and right arrows are translucent text, at 20% and 80% opacity. The text has a text-shadow style applied. The images behind them also have varying opacities applied.

Other browsers are working fine - even IE6, in its own pathetic minimal way - but Firefox is drawing a strange black box behind the text. It's not filling the full text area, just the clip of the actual characters.

I know firefox is capable of doing transparency, so any idea what's triggering this strange behaviour?

---

Update: here's a simple JSFiddle showing the effect. Remove the opacity rule and the problem goes away.

I'm using Firefox 3.6.9 on Linux. The page uses jQuery and jQuery Tools for various opacity fading things, but as the fiddle above shows that isn't causing the issue.

Answer 1

For opacity issues:

http://davidwalsh.name/css-opacity

.show-50 { -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; }

Or perhaps better:

.show-50 {
-moz-opacity: 0.5 !important; 
-webkit-opacity: 0.5!important; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; 
filter: alpha(opacity=50) !important;
opacity: 0.5 !important;}

Read more: http://www.robarspages.ca/web-development/css-opacity-for-all-browsers-cross-browser-compatible/#ixzz13MngpmvC

Answer 2

Instead of opacity have you tried background-color:rgba() ? You can control the opacity of the background color alone. You will still need to use opacity for IE