434666 - Firefox poorly renders CSS opacity below 1.0 on colored text

Status: RESOLVED DUPLICATE of bug 363861

(Firefox :: General, defect)

Description

[Jim]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9) Gecko/2008051206 Firefox/3.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9) Gecko/2008051206 Firefox/3.0

When viewing a web page that uses css opacity below 1.0 on colored text, the text color is not rendered well - particularly with red or white text.





Reproducible: Always

Steps to Reproduce:
1. View red or white text with CSS opacity set below 1.0
2. Observe jagged, unsmooth fade effect
Actual Results:  
Jagged, unsmooth fade between the text color and the background element's color.

Expected Results:  
A smooth color fade between the text color and the background element's color.

I am using the default Firefox 3.0 RC1 theme.
Opera 9.27 renders the css text opacity fade smoothly.
IE7 does not seem to support css text opacity.

Comment 1

[Jim]

Attachment: A sample HTML file showing css opacity usage with various color text and background

Comment 2

[Jim]

Attachment: opacity_test_p.html rendered in Firefox 3 RC1 on Windows Vista

Zipped because uncompressed PNG was too large to attach here.

Comment 3

[Jim]

Attachment: opacity_test_p.html rendered in Opera 9.27 on Windows Vista

Zipped because uncompressed PNG was too large to attach here.

Comment 5

[Jim]

Forgot to mention why I referenced digg.com... I noticed this first on digg.com when I buried a story. Digg presently uses "opacity: 0.6" on buried story titles, with text color: #105CB6 and background color: #FFFFFF.

Sorry for the dupe.

Comment 6

[Ryan Beard]

This is NOT a duplicate bug. If you vist the Daily Mail's new website, you'll see an instance where the bug can be seen: http://www.dailymail.co.uk/tvshowbiz/index.html

In the scrolling module at the top of the page, you can clearly see the text rendered over the smaller images is jagged and poorly anti-aliased. On mouseover this corrects itself, but on scrolling the page down and up again, you can see the bug reappears.

On inspecting the elements in firebug you can see they have an opacity setting of 0.9. I'm using: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9) Gecko/2008052906 Firefox/3.0