Industry Leader in Digital Business

Howto: Solving the FireFox opacity-bug

A friend of me notified me that one of my latest creations seemed to have a color-bug in its tagcloud at the bottom. Using Linux and various browsers, I could not reproduce anything that looked like the problem he described, so I fired up my Windows machine and started FireFox and Chrome. On this Windows machine the problem was easily identified in FireFox, but in Chrome and other browsers everything seemed fine. After various tests I concluded that the issue was a FireFox-only issue which made texts with a lowered opacity look really odd colored.

FireFox opacity-bug

After browsing a few websites, I found a solution that stated that you will have to place a background color on the element with the items that cause problems. I tried to make the parent container white on the mentioned website, but it turned out that this is not a fix for the problem. Experimenting with the background, I did however find a solution that worked: not the parent element needs a background set, but the items must have their background defined. For the example site, I thus changed the CSS-stylesheet and added three lines:

{code}div.tagcloud a {
background: #FFF;

With this code added to the stylesheet the tagcloud seems to be fixed and shows correct in all browsers. Later I found out that the bugged texts are caused by having ClearType enabled in Windows in combination with using FireFox. However, since ClearType does actually make things look better in most cases and since you do not have control over a visitor’s Windows settings the above solution should be included on your website if you are using opacity-settings on texts.

FireFox opacity-bug (fixed)

Related Posts

Comments (1)

Aha, just what I needed thanks, The Prototype Effect.Fade object was making the image fade to black, and this fixed it.


Comments are closed.