google-chrome - Sencha touch 2.2 アプリケーションのレイアウトが chrome 29 で壊れる

Question

ある日、sencha touch 2.2 で作成したアプリを確認したところ、レイアウトが完全に壊れていました。Chrome が 28 から 29 に自動更新されていることに気付きました。Chrome 28 以前、その他の Webkit ブラウザで完全に動作します。サンプルアプリがsencha touchパッケージからのものであることを確認しましたが、これも壊れているようです.私のクライアントもchrome 29を使用しています.chrome 29のこのレイアウトの問題を修正するにはどうすればよいですか

Answer 1

私は同じ問題を抱えていて、修正しました。

に行く

touch/resources/themes/stylesheets/sencha-touch/base/mixins/_Class.scssあなたのアプリで

を次のように置き換え、mixin st-boxコンパスを使用して CSS を再コンパイルします。

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

Answer 2

私も問題を抱えていました。sencha 2.2.1 へのアップデートに成功しました。sencha cmd を使用して、コマンド sencha upgrade を使用してプロジェクトを非常に簡単にアップグレードできます。http://docs-origin.sencha.com/touch/2.2.1/#!/guide/command

Answer 3

タッチ フレームワーク フォルダーで、次の Sass mixin を開きます: resources/themes/stylesheets/sencha-touch/base/mixins/_Class.scss

st-box mixin を検索し、次のコードを置き換えます。 //chrome 29 バグを修正します。- //表示ルールの順序を入れ替えるだけ

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

次にやらなければならないことは、Sass スタイルシートをコンパイルすることです。Sass & Compass (および Ruby) がマシンにインストールされている必要があります。コマンド ラインで、フォルダー touch/resources/sassを参照し 、次の行を実行します: compass watch

これにより、最新の Chrome ブラウザで Sencha Touch の問題が解決されるはずです! (Sass/Compass がインストールされておらず、生成された app.css のみが必要な場合は、ここから自由にダウンロードしてください。 http://www.ladysign-apps.com/developer/wp-content/uploads/ 2013/08/app.css