When using firefox on mac os x, as I mouse over and superfish drops down a menu (either down or a side menu), all the text on the page appears to fade for a split second, and then is back to normal. I've even tested it with animations off, etc (completely bare-bones).
This doesn't happen in safari or opera, nor with ff for windows. Nor does it happen with suckerfish with ff for mac.
Any ideas? Or is anybody experiencing the same effect?
This may have to do with the well-known opacity problem in FF Mac when setting opacity to some element -- which is what I'm guessing Superfish does, maybe with a .fadeIn().. I believe it was Joel Birch who earlier suggested setting opacity on the body to something like . 9999. Maybe in your stylesheet: body { -moz-opacity: 0.9999; }
or in jQuery, in your $(document).ready() : $('body').css({opacity: .9999});
That should keep the text looking pretty much the same regardless of whether something else is fading or not. Am I on the right track here? Does that help?
> When using firefox on mac os x, as I mouse over and superfish drops > down a menu (either down or a side menu), all the text on the page > appears to fade for a split second, and then is back to normal. > I've even tested it with animations off, etc (completely bare-bones).
> This doesn't happen in safari or opera, nor with ff for windows. > Nor does it happen with suckerfish with ff for mac.
> Any ideas? Or is anybody experiencing the same effect?
It is 99.9% certain that it is what Karl said. Here is what has become my set spiel on the subject:
Mac Firefox has two text rendering anti-aliasing modes, one of which makes the text look much lighter or less bold in weight. The usual mode is used when everything on the page has an opacity of 1, or fully opaque. The moment anything drops to 0.9999 opacity, as it does on fadeOut (although this is not a jQuery issue - it's any form of opacity) all the text on the page shifts to the lighter text rendering mode. The reverse also occurs on fadeIn and also between .0001 and 0, that is, just as something becomes completely transparent. It's annoying and the only two workarounds are (1) to set opacity: .999 on the body element which forces all the text on the page to use the light rendering mode 100% of the time and never switch to the bolder mode. This sometimes looks quite good when the design has dark text on a light background. It wouldn't do for light text on dark though, as the text just becomes far too thin and begins to lose readability. The other (2) workaround is to avoid using opacity in the animation completely and using a simple slideDown instead.
> It is 99.9% certain that it is what Karl said. Here is what has become > my set spiel on the subject:
> MacFirefoxhas two text rendering anti-aliasing modes, one of which > makes the text look much lighter or less bold in weight. The usual > mode is used when everything on the page has an opacity of 1, or fully > opaque. The moment anything drops to 0.9999 opacity, as it does on > fadeOut (although this is not a jQuery issue - it's any form of > opacity) all the text on the page shifts to the lighter text rendering > mode. The reverse also occurs on fadeIn and also between .0001 and 0, > that is, just as something becomes completely transparent. It's > annoying and the only two workarounds are (1) to set opacity: .999 on > the body element which forces all the text on the page to use the > light rendering mode 100% of the time and never switch to the bolder > mode. This sometimes looks quite good when the design has dark text on > a light background. It wouldn't do for light text on dark though, as > the text just becomes far too thin and begins to lose readability. The > other (2) workaround is to avoid using opacity in the animation > completely and using a simple slideDown instead.
