Image Flicker on Opacity Anchors

This bug affects some versions of Mozilla and Firefox.

This was a strange bug to deal with, mainly in the way that it is solved. I am proud to say I both discovered and solved this bug, but since my fix is a CSS workaround, the fix is only 99% of the way there. Read on, and you will understand what I mean by that.

I hope this page gets sent to the Mozilla Team, so that the bug gets fixed on the browser end, and this workaround is needed no more. I noticed my old version of Mozilla Phoenix, which is a Firefox beta, did not exhibit the bug.

I use CSS opacity on this site for the thumbnail hover effects that are viewable in Firefox, Mozilla, Internet Explorer and Netscape, but not yet in Opera. When the image thumbnail links are first displayed they are partially transparent due to the CSS opacity I apply to the site's style. When the image links are hovered over by the pointer, they sometimes flicker, giving an undesired effect, and this is not a caching issue like in an IE Flicker bug.

The issue in Firefox only appears in certain examples, so I was forced create examples where it either happens or not. That way, I can find the cause of the bug. From this work, I noticed the bug only appears for whole sections of content that is floated, such as items in a div set.

The strange thing is that I fixed this bug in the past on my old design, and considered the issue over and done with. I almost forgot about my fix when came across the bug again in the new design (which may not be the current design at the time of reading).

Since the bug did not appear in Pheonix, I thought it was something inherit to new versions of Firefox, and I'd live with it until I could perhaps contact the Mozilla Team and get them to fix their browser.

Bug Fix

My fix is simple. Instead of specifying an Opacity of 1.0 to show no transparency for the hover, I use 0.99, and this displays the same as 1.0.

opacity: 0.99;

So, that was that.