Sencha Touch ベースのアプリケーションのプロダクション ビルド バージョンで、IE10 と Chrome でスタイルを適切に適用できないという問題が発生しています。
再現する手順：
Main.js
Ext.define('Lab.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
requires: [
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'panel',
cls: 'MyFirstLogo',
itemId: 'firstLogo'
} ]
}
});
SCSS ファイル - app.scss
.MyFirstLogo{
height: auto !important;
min-height: 100px;
min-width: 404px;
padding: 0px;
background-image:url(../../resources/images/test1.jpeg);
background-repeat:no-repeat;
background-position: left;
}
resources/sass/app.scss - で、背景画像の URL が次のようになっていることを確認します
../../resources/images/test1.jpeg。プロジェクトルート(Lab/)で「sencha app build production」を実行
IE10 64 ビット (Win 7) でアプリケーションにアクセスします。
http://localhost/lab/build/production/Lab/IE10では画像がまったく表示されません。ただし、Chrome でこれを試すと、うまく機能します。Chromeは何とか変換でき
../../resources/images/test1.jpegますhttp://localhost/lab/build/production/Lab/resources/images/test1.jpegが、IE10はそれを行わず、画像を表示できません。このようにして、プロジェクト構造に合わせて、ローカル開発環境でも機能します。IE10 で動作させるために、resources/sass/app.scss のイメージ URL
../../resources/images/test1.jpegをresources/images/test1.jpeg(resources/ ディレクトリがプロジェクト ルートにあるため、これは実際には理にかなっています) に変更し、本番用に再構築しました。この場合、画像は IE10 に表示され始めますが、Chrome を使用すると画像が表示されず、Chrome がこの URL から画像を取得しようとしていますが、これは正しくありません:http://localhost/lab/build/production/Lab/resources/css/resources/images/test1.jpegであり、失敗します。この方法では、私のローカル開発環境でも機能しません。この問題は、「フォント」などの他のリソースでも発生します。
Sencha の Production Build バージョンが IE10 と Chrome の両方で同時に動作しないという問題について、ここで何が起こっているのかを理解するのを手伝っていただけませんか? これは Sencha Touch または Chrome のバグですか、それともここで何か不足していますか?