Sencha touch 2.2 application layout breaks in chrome 29

Question

One day when I checked my app done in sencha touch 2.2, it's layout has been totally broken.I realised that my Chrome has been auto updated to 29 from 28. It works perfectly in chrome 28 and older , any other webkit browsers.When I checked the sample app comes from sencha touch package, it's also seems to be broken.My clients also use chrome 29 .How can I fix this layout issue for chrome 29?

Answer 1

I had same problem and i fixed.

Go to

touch/resources/themes/stylesheets/sencha-touch/base/mixins/_Class.scss in your app

Replace the mixin st-box with the following and re-compile your css using compass:

@mixin st-box($important: no) {
    @if $important == important {
        display: flex !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
    } @else {
        display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
    }
}