I'm working with Ext.JS 4.2.x in a legacy application and recently Chrome is having a weird rendering issue where (randomly) UI components that are supposed to be stacked on top of each other over overlap. The strangest part is that the UI sometimes renders correct (at first) but then with render incorrectly on refresh.

It most cases it appears to be the bottom part not having the CSS correctly calculated for the top part of the component.

CREATION INTERFACE.jpg

I've tried setting heights and widths on all the UI components and it still continues happens.
Here is an example of on of the components on the page displayed in the screen shot. This is typical of all the UI components on the page.

Code:
var selectionPanel =
    {
        layout:
        {
            type:'hbox',
            align:'stretch'
        },

        items:[
        {
            title:'Select Option 1',
            flex:1,
            margin: outerMargin,
            height:100,
            style:{
                border: borderStyle
            },
            items:[{
                xtype:'combo',
                width:200,
                margin: innerMargin,
                triggerAction:'all',
                store:[<%= myNames.toString()%>],
                listeners:{
                    select:State_Select
                }
            }]
        },
        {
            title:'Select An Second Option',
            flex:1,
            margin:'0 4 8 4',
            height:100,
            style:{
                border: borderStyle
            },
            items:[{
                id:'bulkTypeSelect',
                xtype:'combo',
                width:200,
                margin: innerMargin,
                triggerAction:'all',
                store:[<%= globalTypesNames.toString()%>],
                listeners:{
                    select:State_Select_ET
                }
            }]
        }]
    };