420020 - Element Opacity Rendering Bug

Status: RESOLVED INCOMPLETE

(Firefox :: General, defect)

Description

[Shawn Van Ittersum]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_4_11; en) AppleWebKit/525.1+ (KHTML, like Gecko) Version/3.0.4 Safari/523.12.2
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

Elements with opacity <  1 cause FF to render entire page with different font-smoothing setting than the system-wide setting.

Reproducible: Always

Steps to Reproduce:
1. Set Mac OS X > System Prefs > Appearance > Font smoothing = Automatic (this is usually the default setting on new Macs)
2. Launch Firefox
3. Go to a page with the following:

<style>
a:hover {
opacity: 0.5;
}
</style>
<a href="#">Test Mouseover</a>

<p>More text here to see the effects More text here to see the effects More text here to see the effects More text here to see the effects More text here to see the effects More text here to see the effects More text here to see the effects More text here to see the effects</p>

Actual Results:  
Page will be rendered in Automatic/LCD font smoothing, until you mouseover the link.  Then the page will render in Standard/CRT setting.  This happens because elements with opacity < 1 force FF to use the CRT font smoothing.

Expected Results:  
The font smoothing should be consistent, following the system-wide setting, regardless if elements on the page or their styles.

Changing image opacity is a common technique to manipulate mouseover buttons to avoid flicker problems in IE.  But the rendering side effects in FF are actually worse than IE's flicker problem.

Comment 1

[Per Sandström]

This bug is very unfortunate (and its occuring in the Camino browser as well).

A cheap workaround which might be good enough for some is changing the opacity to 0.9999. This will render all elements with lower opacity and cause no flickering.

<style>
body { opacity: 0.9999; }
</style>

Comment 2

[Adam Dexter]

This bug really needs to get fixed. With the growing popularity of FF how can I expect to create websites that don't look like they're glitchy. This does NOT happen in Opera or Safari with the same content.

The .999 opacity deal is a cheap work around but negatively affects the rest of the page. One blog tracking the problem can be found here:
http://www.simpltry.com/2006/12/14/firefox-for-mac-and-opacity-problem

Still, this needs to be FIXED!

Comment 3

[Tyler Downer [He/Him]]

This is a mass search for bugs that are in the Firefox General component, are
UNCO, and have not been changed for 800 days and have an unspecified version. 

Reporter, can you please update to Firefox 3.6.10, create a fresh profile,
http://support.mozilla.com/en-US/kb/managing+profiles, and test again. If you
still see the bug, please update this bug. If the issue is gone, please set the
resolution to RESOLVED > WORKSFORME.

Comment 4

[Tyler Downer [He/Him]]

No reply from reporter, INCOMPLETE. Please retest with Firefox 3.6.12 or later and a new profile (http://support.mozilla.com/kb/Managing+profiles). If you continue to see this issue with the newest firefox and a new profile, then please comment on this bug.

Comment 5

[Per Sandström]

I was not able to reproduce this bug.

User Agent:
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; sv-SE; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12