.#{$prefix}autocontainer-outerCt {
    display: table;

    .#{$prefix}mobile-safari & {
        // https://sencha.jira.com/browse/EXTJS-22339
        // iOS safari has mysterious repaint issues in some scenarios when using auto layout.
        // using translateZ enables hardware accelerated rendering and the issue disappears.
        transform: translateZ(0);
    }
}

// hardware acceleration causes flickering problems on clipped elements.
// disable it while an element is clipped.
.#{$prefix}clipped .#{$prefix}autocontainer-outerCt {
    transform: initial;
}

.#{$prefix}autocontainer-innerCt {
    display: table-cell;
    // height:100% is required on the innerCt in order for percentage-height
    // children to work in IE, firefox, and opera
    height: 100%;
    vertical-align: top;
}