Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,680
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default [CLOSED] Disabled Elements in Firefox 3 / 4

    [CLOSED] Disabled Elements in Firefox 3 / 4


    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
    Attached Images
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    I never see this in my application...

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

  3. #3
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,680
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    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:

    Code:
    .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
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  4. #4
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    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?

  5. #5
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,680
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    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
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  6. #6
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,680
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    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:

    Code:
        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
    Attached Images
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  7. #7
    Sencha User Seana's Avatar
    Join Date
    Jun 2010
    Posts
    82
    Vote Rating
    0
    Seana is on a distinguished road

      0  

    Default


    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...
    Code:
    <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...
    ff-opacity-bug.png
    Sean

  8. #8
    Sencha User Seana's Avatar
    Join Date
    Jun 2010
    Posts
    82
    Vote Rating
    0
    Seana is on a distinguished road

      0  

    Default


    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.

    [edit]
    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)
    [/edit]

    [edit2]
    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?
    [/edit2]
    Last edited by Seana; 6 Oct 2010 at 8:35 AM. Reason: additional info/question
    Sean

  9. #9
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,680
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    hi sean,

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

    Code:
    .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
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  10. #10
    Sencha User Seana's Avatar
    Join Date
    Jun 2010
    Posts
    82
    Vote Rating
    0
    Seana is on a distinguished road

      0  

    Default


    Confirmed last night that this is a known issue with-in Gecko bug-report here.

    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.
    Last edited by Seana; 7 Oct 2010 at 7:16 AM. Reason: color tags don't work, bold does though!
    Sean

Similar Threads

  1. Window Maximized, Resizable Elements Disabled
    By hhanna in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 29 Jan 2010, 12:06 PM
  2. [CLOSED][3.0.0] Disabled Combobox not really disabled
    By gelleneu in forum Ext 3.x: Bugs
    Replies: 1
    Last Post: 20 Jul 2009, 5:57 AM
  3. Replies: 2
    Last Post: 11 Apr 2009, 5:54 AM
  4. ToolTips on disabled elements
    By jraue in forum Community Discussion
    Replies: 1
    Last Post: 9 Apr 2009, 1:03 AM
  5. [2.x][FIXED] Disabled elements alpha problem in FF3
    By ChrisR in forum Ext 2.x: Bugs
    Replies: 6
    Last Post: 8 Jul 2008, 1:26 AM

Thread Participants: 4