Why does FF18 (and not older releases) have new, severe font display issues in some contexts?

Question

When I upgraded to FF18 in Windows XP, all the sample pages (more than 200) in my portfolio site were effectively rendered unreadable in FF18 in XP. I also noticed the darker themes in Gmail had some of the same issues, though much less severe. I see none of these problems in FF18 on OS X using the latest version of the OS (Version 10.8: "Mountain Lion"). The issues seem to have no relationship to the fonts specified, although on one system, the bolder Arial in Gmail's top menubar looked much worse than unbolded Arial inside the inbox.
I narrowed down the portfolio page issues to two main contributing factors:
1. Translucent CSS opacity setting in a non-containing layer below the layer containing the text. To try being a bit more clear, the layer that actually contained the text and its background was NOT using any opacity settings. Think of the lightbox effect, if you've heard of that, to pop-up a page inside the existing browser window rather than in a new window, which typically uses a translucent overlay outside of the text area that reveals some of the background of the opening page.
2. The text layer used white and other light-colored text on a dark background (#262626).
Although I've I spent several days redesigning and reworking my pages to protect them from future potential rendering issues, I'd still like to know more about what's causing this. I've worked around somewhat similar issues in other browsers (mainly ie and chrome), but never so severe as these latest ones in FF18.
I tried unchecking the hardware acceleration checkbox in Options, and tried reversing the gfx 'azure' and '2d' options in about:config. I also tried disabling all add-ons. However, none of this made any difference in either Gmail or my own pages.
I can't realistically ask my potential clients to fiddle with all of these settings, so that is a major reason for asking. I could post a couple of screenshots of my Gmail inbox, although I don't see any place in this form for file uploads.

Answer 1

Here're two screenshots showing the more severely unreadable rendering when a non-containing translucent layer is below the text layer (Item #1 in opening post).
1: The first screenshot shows 13px Calibri (Windows system font) body text at #ffffff (white) foreground color body text over a #262626 (dark gray) background. The background color of the 0.5 opacity translucent layer (visible at top and left sides of screenshot) is #DFDBCD. The subheads are 18px #fff Calibri.
2: The second screenshot shows 13px body text at #ffffff (white) foreground color body text using an open source font over a #262626 (dark gray) background. The background color of the 0.5 opacity translucent layer (visible at top and left sides of screenshot) is #DFDBCD. The subheads are 18px #fff using an open source font.