Sencha touch 2.2 application layout breaks in chrome 29

问题

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?

回答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;
    }
}

回答2:

I was having an issue as well, I had success updating to sencha 2.2.1. you can use sencha cmd to upgrad your project pretty easily using the command sencha upgrade. http://docs-origin.sencha.com/touch/2.2.1/#!/guide/command

回答3:

In your touch framework folder open the following Sass mixin: resources/themes/stylesheets/sencha-touch/base/mixins/_Class.scss

Search for the st-box mixin, and replace the code for: //fix for chrome 29 bug. - it just switches the order //of the display rules

@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;
    }
}

The next thing you have to do, is compile the Sass stylesheets. You will need Sass & Compass (and Ruby) have installed on your machine. On the command line, browse to the folder: touch/resources/sass and run the following line: compass watch

This should fix your Sencha Touch problems for the latest Chrome browser! (In case you don’t have Sass/Compass installed and you only want the generated app.css, feel free to download it from here. http://www.ladysign-apps.com/developer/wp-content/uploads/2013/08/app.css

来源：https://stackoverflow.com/questions/18627787/sencha-touch-2-2-application-layout-breaks-in-chrome-29