This issue duplicates another issue.
  1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    6
    Vote Rating
    0
    sa.saurabh is on a distinguished road

      0  

    Default ext-4.2.0.663 provided css styles not working on IE8 with HTTPS (SSL)

    ext-4.2.0.663 provided css styles not working on IE8 with HTTPS (SSL)


    CSS styles provided with ext-4.2.0.663 are not working on IE8 with HTTPS(SSL).

    Throws the security warning as css classes contains about:blank urls as background-image. one e.g. below

    body.x-nbr .x-btn-default-small {
    /* Pass along Div/Table, Horz/Vert, border-radius and border-width: */
    background-image: url("about:blank#th-3-3-3-3-1-1-1-1-2-2-2-2");
    }

    Also buttons and tabs etc. are not getting styled.
    Issue only on IE8 with HTTPS (SSL). With HTTP it works fine.

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,795
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Thanks for the report!
    Looks like this will be fixed with 4.2.1!

  3. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    6
    Vote Rating
    0
    sa.saurabh is on a distinguished road

      0  

    Default ext-4.2.0.663 provided css styles not working on IE8 with HTTPS (SSL)

    ext-4.2.0.663 provided css styles not working on IE8 with HTTPS (SSL)


    When will 4.2.1 release? Is there any workaround or any fix available to use?

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,795
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    I don't have a workaround at this time. 4.2.1 doesn't have a release date, but is in Beta now.

  5. #5
    Sencha User
    Join Date
    Jan 2011
    Posts
    19
    Vote Rating
    1
    pyrite is on a distinguished road

      0  

    Default


    I believe I have experienced this bug with IE7 as well.

    See:

    http://www.sencha.com/forum/showthre...7-IE8-over-SSL

    Glad to know it will be fixed in 4.2.1 (sadly, my company still uses IE7).

    Thank you!!

  6. #6
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    108
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Quote Originally Posted by slemmon View Post
    I don't have a workaround at this time. 4.2.1 doesn't have a release date, but is in Beta now.
    Hi @slemmon,

    Could you, please, clarify the fix for the HTTPS security warning has been included to Beta or not? Seems, it has not. At least, I can't see anything related to that problem in the Release Notes.

    According to this thread (post #15) the ticket is EXTJSIV-9162.
    http://www.sencha.com/forum/showthread.php?258615
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  7. #7
    Sencha User
    Join Date
    Jan 2011
    Posts
    19
    Vote Rating
    1
    pyrite is on a distinguished road

      1  

    Default


    Unless I'm being deceived, this issue appears to be fixed for me with ext-4.2.1.744.

    I do not get the security warning, and all the buttons and css styles appear to work as expected with IE7/8.

  8. #8
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    108
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Thank you, @pyrite!
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  9. #9
    Sencha User
    Join Date
    Jun 2008
    Posts
    138
    Vote Rating
    7
    jchau is an unknown quantity at this point

      2  

    Default


    Is there a workaround possible for those of us still on 4.2.0 without grading to 4.2.1. IMO, this is a major showstopper for any enterprise software.

  10. #10
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    108
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Here are my findings.

    Comparing ExtJS 4.2.0 and 4.2.1 beta sources I discovered that the CSS rules like:

    Code:
    body.x-nbr .x-btn-default-small {
       background-image: url("about:blank#th-3-3-3-3-1-1-1-1-2-2-2-2");
    }
    were replaced with the CSS rules like:
    Code:
    body.x-nbr .x-btn-default-small-frameInfo {
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=false, src="ext-frame#th-3-3-3-3-1-1-1-1-2-2-2-2");
    }
    I guess it was because the issue we are facing. It appears that
    Code:
    background-image: url("about:blank#th-3-3-3-3-1-1-1-1-2-2-2-2");
    causes a security warning.

    So, to correct it on the CSS level it needs to add the following to correct a button (a "small" one):
    Code:
    body.x-nbr .x-btn-default-small {
        background-image: none !important;
    }
    
    body.x-nbr .x-btn-default-small-frameInfo {
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=false, src="ext-frame#th-3-3-3-3-1-1-1-1-2-2-2-2");
    }
    To correct quick tips:
    Code:
    body.x-nbr .x-tip-default {
        background-image: none !important;
    }
    
    body.x-nbr .x-tip-default-frameInfo {
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=false, src="ext-frame#th-3-3-3-3-1-1-1-1-2-2-2-2");
    }
    Totally, I have found 34 appearances in the ext-theme-classic CSS file. I guess to fix the issue it needs to override them all. Moveover, for each theme (not sure about Neptune). Well, it is going to be complicated to override everything.

    Another aspect.

    This "-frameInfo" postfix thing is managed within the Ext.util.Renderable class which is mixed into the Ext.AbstractComponent class. I have extracted the related changes.

    AbstractComponent override
    Code:
    Ext.AbstractComponent.override({
        frameInfoRe: /ext-frame#(.+)"/,
    
        getElConfig : function() {
            var me = this,
                autoEl = me.autoEl,
                frameInfo = me.getFrameInfo(),
                config = {
                    tag: 'div',
                    tpl: frameInfo ? me.initFramingTpl(frameInfo.table) : me.initRenderTpl()
                },
                protoEl = me.protoEl,
                i, frameElNames, len, suffix, frameGenId, frameData;
    
            me.initStyles(protoEl);
            protoEl.writeTo(config);
            protoEl.flush();
    
            if (Ext.isString(autoEl)) {
                config.tag = autoEl;
            } else {
                Ext.apply(config, autoEl); // harmless if !autoEl
            }
    
            // It's important to assign the id here as an autoEl.id could  have been (wrongly) applied and this would get things out of sync
            config.id = me.id;
    
            if (config.tpl) {
                // Use the framingTpl as the main content creating template. It will call out to this.applyRenderTpl(out, values)
                if (frameInfo) {
                    frameElNames = me.frameElNames;
                    len = frameElNames.length;
    
                    config.tplData = frameData = me.getFrameRenderData();
                    frameData.renderData = me.initRenderData();
                    frameGenId = frameData.fgid;
    
                    // Add the childEls for each of the frame elements
                    for (i = 0; i < len; i++) {
                        suffix = frameElNames[i];
                        me.addChildEls({ name: 'frame' + suffix, id: frameGenId + suffix });
                    }
    
                    // Panel must have a frameBody
                    me.addChildEls({
                        name: 'frameBody',
                        id: frameGenId + 'MC'
                    });
                } else {
                    config.tplData = me.initRenderData();
                }
            }
    
            return config;
        },
    
        /**
         * @private
         * On render, reads an encoded style attribute, "filter" from the style of this Component's element.
         * This information is memoized based upon the CSS class name of this Component's element.
         * Because child Components are rendered as textual HTML as part of the topmost Container, a dummy div is inserted
         * into the document to receive the document element's CSS class name, and therefore style attributes.
         */
        getFrameInfo: function() {
            // If native framing can be used, or this component is not going  to be framed, then do not attempt to read CSS framing info.
            if (Ext.supports.CSS3BorderRadius || !this.frame) {
                return false;
            }
    
            var me = this,
                frameInfoCache = me.frameInfoCache,
                cls = me.getFramingInfoCls() + '-frameInfo',
                frameInfo = frameInfoCache[cls],
                max = Math.max,
                styleEl, match, info, frameTop, frameRight, frameBottom, frameLeft,
                borderWidthT, borderWidthR, borderWidthB, borderWidthL,
                paddingT, paddingR, paddingB, paddingL,
                borderRadiusTL, borderRadiusTR, borderRadiusBR, borderRadiusBL;
    
            if (frameInfo == null) {
                // Get the singleton frame style proxy with our el class name stamped into it.
                styleEl = Ext.fly(me.getStyleProxy(cls), 'frame-style-el');
                info = styleEl.getStyle('filter');
    
                if (info) {
                    match = info.match(me.frameInfoRe);
                    if (match) {
                        // The framing data is encoded as
                        // 
                        //                   D=div|T=table
                        //                   |   H=horz|V=vert
                        //                   |   |
                        //                   |   |
                        //        ext-frame#[DT][HV]-[T-R-B-L]-[T-R-B-L]-[T-R-B-L]
                        //                          /       /  |       |  \      \
                        //                        /        /   |       |   \      \
                        //                      /         /   /         \   \      \
                        //                    /          /    border-width   \      \
                        //                  border-radius                      padding
                        //
                        // The first 2 chars hold the div/table and horizontal/vertical flags.
                        // The 3 sets of TRBL 4-tuples are the CSS3 values for border-radius,
                        // border-width and padding, respectively.
                        //
                        info = match[1].split('-');
                        
                        borderRadiusTL = parseInt(info[1], 10);
                        borderRadiusTR = parseInt(info[2], 10);
                        borderRadiusBR = parseInt(info[3], 10);
                        borderRadiusBL = parseInt(info[4], 10);
                        borderWidthT   = parseInt(info[5], 10);
                        borderWidthR   = parseInt(info[6], 10);
                        borderWidthB   = parseInt(info[7], 10);
                        borderWidthL   = parseInt(info[8], 10);
                        paddingT       = parseInt(info[9], 10);
                        paddingR       = parseInt(info[10], 10);
                        paddingB       = parseInt(info[11], 10);
                        paddingL       = parseInt(info[12], 10);
        
                        // This calculation should follow ext-theme-base/etc/mixins/frame.css
                        // with respect to the CSS3 equivalent formulation:
                        frameTop    = max(borderWidthT, max(borderRadiusTL, borderRadiusTR));
                        frameRight  = max(borderWidthR, max(borderRadiusTR, borderRadiusBR));
                        frameBottom = max(borderWidthB, max(borderRadiusBL, borderRadiusBR));
                        frameLeft   = max(borderWidthL, max(borderRadiusTL, borderRadiusBL));
        
                        frameInfo = {
                            table: info[0].charAt(0) === 't',
                            vertical: info[0].charAt(1) === 'v',
        
                            top: frameTop,
                            right: frameRight,
                            bottom: frameBottom,
                            left: frameLeft,
        
                            width: frameLeft + frameRight,
                            height: frameTop + frameBottom,
        
                            maxWidth: max(frameTop, frameRight, frameBottom, frameLeft),
        
                            border: {
                                top:    borderWidthT,
                                right:  borderWidthR,
                                bottom: borderWidthB,
                                left:   borderWidthL,
                                width:  borderWidthL + borderWidthR,
                                height: borderWidthT + borderWidthB
                            },
                            padding: {
                                top:    paddingT,
                                right:  paddingR,
                                bottom: paddingB,
                                left:   paddingL,
                                width:  paddingL + paddingR,
                                height: paddingT + paddingB
                            },
                            radius: {
                                tl: borderRadiusTL,
                                tr: borderRadiusTR,
                                br: borderRadiusBR,
                                bl: borderRadiusBL
                            }
                        };
                    } else {
                        frameInfo = false;
                    }
                } else {
                    frameInfo = false;
                }
    
                //<debug error>
                // This happens when you set frame: true explicitly without using the x-frame mixin in sass.
                // This way IE can't figure out what sizes to use and thus framing can't work.
                if (me.frame === true && !frameInfo) {
                    Ext.log.error('You have set frame: true explicity on this component (' + me.getXType() + ') and it ' +
                            'does not have any framing defined in the CSS template. In this case IE cannot figure out ' +
                            'what sizes to use and thus framing on this component will be disabled.');
                }
                //</debug>
    
                frameInfoCache[cls] = frameInfo;
            }
    
            me.frame = !!frameInfo;
            me.frameSize = frameInfo;
    
            return frameInfo;
        },
        
        getFramingInfoCls: function(){
            return this.baseCls + '-' + this.ui;
        }
    });
    Finally, I combined these things in the sample:
    https://s83470.gridserver.com/

    And it appears to help remedy the problem with a small button and quick tips.

    The problems are:

    1. Needs to override many other problematic CSS rules. As I said, it is going to be complicated.
    2. I am not 100% sure that the AbstractComponent override doesn't break something else.

    As a conclusion, I see a little hope to get it fixed unless updating to ExtJS 4.2.1 beta.
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter