• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Browser issue  Firefox + ClearType + Opacity

Luke F

Well-known member
#1
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

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

Luke F

Well-known member
#3
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 :)
 
#4
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:
firefox+clearfont.png
 
#8
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).
 

Luke F

Well-known member
#11
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

Well-known member
#12
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

Well-known member
#13
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

Well-known member
#14
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 ...
 

Mike

XenForo developer
Staff member
#17
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.
 

Mike

XenForo developer
Staff member
#20
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.