PDA

View Full Version : [CLOSED] Disabled Elements in Firefox 3 / 4



tobiu
5 Oct 2010, 3:23 AM
hi team,

i think i posted this before, but am not able to find the topic.
this is more a firefox-bug than it has to do with ext js, but it is something really looking ugly.

since firefox 3, the browser is no longer able to render fonts with an opacity < 1 correctly.
the font-color is no longer gray, but shimmering in various green colors.

i added a screen as an example.

the big problem is, that this bug is also in the firefox 4 beta.

one way to work around this bug could be to replace the opacity for disabled fonts with a specified color of gray when dealing with firefox. on disable adding this new color with !important, leaving the original color too to restore it on enable.


kind regards
tobiu

Condor
5 Oct 2010, 3:39 AM
I never see this in my application...

1. Did you enable ClearType for all applications?
2. Did you configure ClearType correctly for your monitor?

tobiu
5 Oct 2010, 5:07 AM
hi condor,

thanks for your reply. we tested this through on 5 computers, windows 7 or XP.
disabling clearType does help, but it's not an option to advice all customers to do so.

i don't know, why this works fine with clearType activated in chrome and ie, only firefox 3+ wont do. firefox 2 was fine as well.

i found a quite effective hotfix for this issue:



.x-item-disabled * {
color: #736F6E !important;
}


instead of gray. you can see almost no difference between those 2 colors and this renders fine in ff.
to make it really clean, all disabled classes should get this color instead of gray.


kind regards
tobiu

Jamie Avins
5 Oct 2010, 8:16 AM
We're having some trouble reproducing this, do you have a test case or steps you are using to make it happen? Also, what exact version of FF are you using?

tobiu
5 Oct 2010, 8:41 AM
hi jamie,

firefox 3.6.10 and the ff 4 beta.
i can try to build a small testcase tomorrow.
it should happen in a formpanel with a disabled checkbox that has a boxLabel.

btw. boxLabel is 2x in the api-docs.


kind regards,
tobiu

tobiu
6 Oct 2010, 1:06 AM
hi jamie,

this bug no longer happens in windows XP, it seems that on of the last firefox updates resolved it there.
you can see it with windows 7, font -> clearType = on and firefox 3.6.10 or firefox 4 beta.

windows 7, font -> clearType = on and ie8 or chrome work fine, that's why i am thinking its a firefox issue.

for a simple testcase, lets use ext-3.3.0-rc/examples/form/dynamic.html:



var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0; background-color:white;',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'First Name',
name: 'first',
boxLabel:'i am green',
disabled:true,
xtype:'checkbox'
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, new Ext.form.TimeField({
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
})
],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

simple.render(document.body);


i only changed the first form, adding a disabled checkbox with boxlabel and setting the background color to white, so you can see the issue better. the css hotfix posted above solves this problem.


kind regards
tobiu

Seana
6 Oct 2010, 7:59 AM
I too have encountered this issue, it only seems to happen with the checkbox(in EXT JS currently), and only when the Style rule contains "opacity". I'm going to go out on a limb here and say this is actually a rendering bug with-in Gecko and a bug report should be filed there.

as a proof of concept I threw this little(hideous) html in a file...


<html>
<body>
<h1>"-moz-opacity" & "opacity"</h1>
<span style="-moz-opacity: .6;opacity: .6;color:gray">Hello</span> <span style="-moz-opacity: .39;opacity: .39;color:gray">World</span>
<h1>"-moz-opacity"</h1>
<span style="-moz-opacity: .6;color:gray">Hello</span> <span style="-moz-opacity: .39;color:gray">World</span>
<h1>"opacity"</h1>
<span style="opacity: .6;color:gray">Hello</span> <span style="opacity: .39;color:gray">World</span>
</body>
</html>


which renders like...
22711

Seana
6 Oct 2010, 8:06 AM
Oh yes, I'm using Firefox 3.6.10 and Windows 7 as well, I haven't looked since but as of Friday of last week it was happening in FF on my Mac as well.


MDC's page on opacity has samples that work fine. the difference? Font color, when removing "color:gray" from the style opacity renders as expected (with color:black at least)



Since firefox 0.9 -moz-opacity has been an alias for opacity(as of 3.5 -moz-opacity is ignored), is there an reason to keep it in the CSS rule in the 3.x line of ExtJS since Firefox 1.5 and later are only supported?

tobiu
6 Oct 2010, 8:32 AM
hi sean,

agread with removing -moz css.
if you need a fast solution for the problem, try out



.x-item-disabled * {
color: #736F6E !important;
}


though it does not help in your html-example (tested it), it really helps a lot in ext-apps :)

using black + opacity would also help.


kind regards
tobiu

Seana
7 Oct 2010, 7:15 AM
Confirmed last night that this is a known issue with-in Gecko bug-report here (https://bugzilla.mozilla.org/show_bug.cgi?id=577419).

the test case however does show that a change like opacity: 0.6 to opacity:0.65 could "correct the issue" as a temporary solution. Sadly in the little bit of testing I did last night I found that there are a number of variables that add to the issue's complexity from a "code around it" stand point. For instance color:gray; background-color: white seems to have a large breadth of opacity values that are rendered incorrectly.

aghextjs
8 Nov 2010, 9:31 AM
I just ran into this issue too. I can duplicate the issue by editing the Checkbox/Radio Groups example using 3.3.0 by setting one of the checkboxes to disabled (cat) and setting frame to false on the formPanel. Oh, and I'm on Firefox 3.6.12.

Completely understand that this is a bug in Firefox, but I wanted to post my workaround just in case it can help out someone else. I had to add to the x-form-check-wrap style in order to fix my UI. The above workarounds didn't handle it. I didn't have to change the current colors or opacity settings, just make sure there was a background color set on the containing div.



.x-form-check-wrap {
background-color: white;
}
Annie