Browser issue Firefox + ClearType + Opacity

[Luke F]

There is a known and yet to be fixed (even in 4) bug in Firefox where text in transparent elements will look awful (text turns strange colours) if their opacity is < 1 (even without animation) if ClearType is enabled on Windows.

The workaround is to make all elements where opacity is adjusted (such as forum descriptions, quick reply posting, etc.) have a solid background (anything but transparent, none or undefined). I would like to not have to do this manually when xenForo is released, as the vast majority of my users use Firefox on Windows

 

[Kier]

Firefox? Really? I'll have to look into that, as far as I was aware only IE displayed ClearType issues with transparency.

 

[Luke F]

Yup, I use Firefox as my main browser and it happens to sites all over the place, some worse than others

I always make sure my sites don't suffer from the bug, would be cool if xenForo did too

 

[goyo]

There is a known and yet to be fixed (even in 4) bug in Firefox where text in transparent elements will look awful (text turns strange colours) if their opacity is < 1 (even without animation) if ClearType is enabled on Windows.

The workaround is to make all elements where opacity is adjusted (such as forum descriptions, quick reply posting, etc.) have a solid background (anything but transparent, none or undefined). I would like to not have to do this manually when xenForo is released, as the vast majority of my users use Firefox on Windows

...

Strange I don't have this issue with Firefox and ClearType on any Win computers:

 

[Mark.B]

Tested that in Firefox, I find it does go that strange colour briefly as it is popping up but then loads ok.

 

[Freddie]

Same as Mark.B

 

[Disjunto]

Tested that in Firefox, I find it does go that strange colour briefly as it is popping up but then loads ok.

Yeah that screen seems to be taken mid fade in/out

 

[goyo]

Yup, I use Firefox as my main browser and it happens to sites all over the place, some worse than others

I always make sure my sites don't suffer from the bug, would be cool if xenForo did too

Nope...I've tested XF on other machines when it's fully loaded is perfectly readable without extra colors (opacitiy works well with FF in other pages...I'm actually using it when developing... ).

Maybe it has to do with your cleartype settings ? In Win7 there's a ClearType text tuner (Control Panel - Adjust ClearType Text).

 

[KURTZ]

W7 64bit + clear type and FF 3.6.8

 

[Nick]

W7 64bit + clear type and FF 3.6.8

What's with those little arrows next to the "test messges" forum? They're the same chevrons used in the breadcrumb navigation.

 

[Luke F]

In the cases I mentioned it only happens while animating, as those are the only times opacity is less than 1, but it is still very noticable on the forum descriptions.

KURTZ's and goyo's screenshots appear to have been taken after the animation has completed, when there is no issue as opacity is 1.

 

[Dean]

Although I cannot find it, someone was having trouble with js while using a really slow internet connection recently.

The js did not load and the category popup looked strange? Something like that. Perhaps?

 

[Luke F]

Although I cannot find it, someone was having trouble with js while using a really slow internet connection recently.

The js did not load and the category popup looked strange? Something like that. Perhaps?

No that's unrelated. As I already said the bug is caused by a lack of background colour, and is easily fixed by making the element in question non-transparent.

 

[KURTZ]

In the cases I mentioned it only happens while animating, as those are the only times opacity is less than 1, but it is still very noticable on the forum descriptions.

KURTZ's and goyo's screenshots appear to have been taken after the animation has completed, when there is no issue as opacity is 1.

correct, just a moment before the text was light green like you had previously posted ...

 

[KURTZ]

What's with those little arrows next to the "test messges" forum? They're the same chevrons used in the breadcrumb navigation.

little arrows? i can't get them ... OMG. i'm tired ...

 

[Nick]

little arrows? i can't get them ... OMG. i'm tired ...

Looks like they're gone now. Maybe they were on my screen and not yours... cause I was playing with the header earlier in Firebug and it happened then.

 

[Mike]

I have to say, even with this pointed out, I still can't see it here. I don't know if my eye just doesn't catch it or if it's specific to certain versions of Windows.

 

[Caliburn]

I usually have ClearType disabled but enabled it for a quick test. I'm confirming this problem in FF-3.6.8

 

[Luke F]

I have to say, even with this pointed out, I still can't see it here. I don't know if my eye just doesn't catch it or if it's specific to certain versions of Windows.

Are you sure you have ClearType enabled? Take a look here for a static example: http://sandbox.darkimmortal.com/cleartype.html

I see this:

 

[Mike]

Yeah, I see it. I just don't see it on our tool tips. I don't know if it's the movement or the fast fade, the text just doesn't register until it's up to full opacity anyway.