TabPanel not rendering properly in Internet Explorer 8 using custom font

Question

I'm trying to understand how ExtJS4 handle legacy browsers like Internet Explorer 8. I have a complext initial page, that uses the border layout and have the north, south, center and west regions.

In the center I have a TabPanel that will be responsible by loading the new views. I already tried to reduce the MVC code, rendering only the west and center, but the tabs don't appear in the panel.

I'm also using the ext-all-debug.js but the developer console is empty (no errors).

There's another topic on StackOverflow that show's an workaround, and it actually quite work (broke some ComboBoxes and grid events):

  // Override CSS3BorderRadius value which caused render problems in <IE9 when false.
  Ext.supports['CSS3BorderRadius'] = true;
  // Hack-ish remove class sniffers from Ext.EventManager (which attaches modrnizer type classes onto the body)
  Ext.getBody().removeCls('x-nbr x-nlg');

Why do I need this to render my tabpanel properly? How ExtJS handle old IE browsers?

ViewPort example

Ext.define('MyApp.view.AppViewport', {
    extend: 'Ext.container.Viewport',


    border: true,
    cls: '',
    id: 'app-viewport',
    padding: '5 5 5 5',
    layout: {
        type: 'border'
    },


    initComponent: function () {
        var me = this;


        Ext.applyIf(me, {
            style: {
                background: '#F1F1F1'
            },
            items: [{
                xtype: 'panel',
                region: 'west',
                split: true,
                width: 250,
                layout: {
                    type: 'accordion'
                },
                collapsed: false,
                collapsible: true,
                title: 'Menu',
                items: [
                    /*{
                            xtype: 'treepanel',

                            filterByText: function(text) {
                                this.filterBy(text, 'text');
                            },
                            filterBy: function(text, by) {


                                this.clearFilter();


                                var view = this.getView(),
                                    me = this,
                                    nodesFiltered = [];


                                if(!text || text == '') {
                                    me.collapseAll();
                                } else {


                                    // Find the nodes which match the search term, expand them.
                                    // Then add them and their parents to nodesAndParents.
                                    this.getRootNode().cascadeBy(function(tree, view){
                                        var currNode = this;


                                        if(currNode && currNode.data[by] && currNode.data[by].toString().toLowerCase().indexOf(text.toLowerCase()) > -1) {


                                            currNode.expand();


                                            if(currNode.hasChildNodes()) {
                                                currNode.eachChild(function(node){
                                                    nodesFiltered.push(node.id);
                                                });
                                            }


                                            while(currNode.parentNode) {
                                                nodesFiltered.push(currNode.id);
                                                currNode = currNode.parentNode;
                                                currNode.expand();
                                            }
                                        }
                                    }, null, [me, view]);


                                    // Hide all of the nodes which aren't in nodesAndParents
                                    this.getRootNode().cascadeBy(function(tree, view){
                                        var uiNode = view.getNodeByRecord(this);


                                        if(uiNode && !Ext.Array.contains(nodesFiltered, this.id)) {
                                            Ext.get(uiNode).setDisplayed('none');
                                        }
                                    }, null, [me, view]);
                                }
                            },
                            clearFilter: function() {
                                var view = this.getView();


                                this.getRootNode().cascadeBy(function(tree, view){
                                    var uiNode = view.getNodeByRecord(this);


                                    if(uiNode) {
                                        Ext.get(uiNode).setDisplayed('table-row');
                                    }
                                }, null, [this, view]);
                            },

                            id: 'programasTree',
                            title: 'Programas',
                            store: 'MyTreeStore',
                            rootVisible: false,
                            viewConfig: {
                                id: 'programastree'
                            },
                            dockedItems: [
                                {
                                    xtype: 'textfield',
                                    dock: 'top',
                                    id: 'txtFiltrar',
                                    margin: '5 0 5 0',
                                    fieldLabel: 'Filtrar',
                                    labelWidth: 60
                                }
                            ]
                        },*/
                    {
                        xtype: 'panel',
                        border: false,
                        title: 'Favoritos'
                    }, {
                        xtype: 'panel',
                        border: false,
                        title: 'Recentes'
                    }
                ]
            }, {
                xtype: 'panel',
                region: 'center',
                cls: 'x-portal',
                id: 'app-portal',
                layout: {
                    type: 'fit'
                },
                /*
                    bodyCls: [
                        'x-portal-body',
                        'x-panel-body-default',
                        'x-box-layout-ct',
                        'x-layout-fit'
                    ],
                    */
                items: [{
                    xtype: 'tabpanel',
                    id: 'mainTabPanel',
                    items: [{
                        xtype: 'panel',
                        title: 'Tab 1'
                    }, {
                        xtype: 'panel',
                        title: 'Tab 2'
                    }, {
                        xtype: 'panel',
                        title: 'Tab 3'
                    }]
                }]
            }]
        });


        me.callParent(arguments);
    }


});

EDIT:

I find out that the issue only happens when I set the font to Open Sans:

* {
  /*  font-family: 'Trebuchet MS', Arial, sans-serif !important; */
  font-family: 'Open Sans', Arial, sans-serif  !important;
  -webkit-font-smoothing: antialiased;

}

Answer 1

Ok, so it seems that the problem is the CSS:

font-family: 'Open Sans', Arial, sans-serif  !important;

When using this with * the layout breaks in IE. The solution is to change the original Ext CSS, in all places that a font is declared.

Answer 2

I'have had a similar problem, verified with IE 9, IE 10 and IE 11, and I've seen in the DOM that the text element of the accordion haven't inherited the font-family.

So I've forced it in the css:

text {
     font-family: 'Open Sans', Arial, sans-serif  !important;
}

Answer 3

Reason is that the webfont in IE are loaded after the page is rendered. This does not happen in Chrome or FF. The layout is adjusting to the 'Ariel' and then when pulling the 'Open Sans' (which is wider) your text is clipped. Hold the Ext.onready till the webfont is loaded.