Sencha Touch Production Build Issue with IE10 and Chrome

Question

I am experiencing an issue with production build version of the Sencha Touch based application not being able to apply styles properly in IE10 and Chrome.

Steps to reproduce:

Main.js

Ext.define('Lab.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
requires: [

],
config: {
tabBarPosition: 'bottom',

items: [

{
xtype: 'panel',
cls: 'MyFirstLogo',
itemId: 'firstLogo'
} ]
}
});

SCSS file - 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;
}

1. Make sure the background image URL is like this in resources/sass/app.scss - ../../resources/images/test1.jpeg.

2. Run "sencha app build production" in project root (Lab/)

3. Access the application in IE10 64bit (Win 7) : http://localhost/lab/build/production/Lab/

4. Images are not shown at all in IE10. However, when trying this in Chrome it works well. Chrome somehow is able to convert the ../../resources/images/test1.jpeg to http://localhost/lab/build/production/Lab/resources/images/test1.jpeg but IE10 doesn't do it and fails to show the image. This way it also works in my local development environment as it goes with my project structure.

5. In order to make it work in IE10, I have changed the image URL from ../../resources/images/test1.jpeg to resources/images/test1.jpeg (This actually makes sense as resources/ directory is in the project root) in resources/sass/app.scss and rebuild it for production. In this case image starts to appear in IE10 but now when I use Chrome - Image does't show up and Chrome is trying to retrieve the image from this URL which in not right: http://localhost/lab/build/production/Lab/resources/css/resources/images/test1.jpeg, and it fails. This way it DOES NOT also work in my local development environment.

6. This issue happens for other resources as well like "fonts".

Could you please help me understand what's going on here with Sencha's Production Build version not working in both IE10 and Chrome at the same time? Is this this bug with Sencha Touch or Chrome or I am missing something here?

Answer 1

It turns out to be the known bug in Sencha Touch as confirmed by the Sencha people. Check this link: http://www.sencha.com/forum/showthread.php?266275. Thanks @peter and @arthurakay for you help. If I need a workaround or further discussion on this. I will start the discussion again. Thanks guys!

Answer 2

Why are you going back so many directories in the relative file path?

Whether you're in development or production, the CSS file lives at:

{app_root}/resources/css/app.css

Assuming your images are here:

{app_root}/resources/images/

...then your filepaths should look like this:

background-image:url(../images/test1.jpeg);

FYI I'm assuming Touch 2.3 and Cmd 4.0.x since you didn't specify.

Answer 3

1. The address you access the application (in any browser) becomes the page base address. In your case it's http://localhost/lab/build/production/Lab/
   You can confirm this by printing alert(document.location.href).
   Check the trailing slash, please.
2. Address ../../resources/images/test1.jpeg then means http://localhost/lab/build/production/Lab/../../resources/images/test1.jpeg and translates to incorrect
   http://localhost/lab/build/resources/images/test1.jpeg
3. Modify the relative address to ../resources/images/test1.jpeg to get
   http://localhost/lab/build/production/resources/css/resources/images/test1.jpeg

You can always verify the resulting address by entering it to the browser's address bar.
Both IE and Chrome translate paths correctly as this is their basic task.

Answer 4

I have found a workaround to make images/icons visible on both IE10 and Chrome.

Here, CSS property given for any given class containing "background-image" should contain working URL's for both IE10 and Chrome as follows :

.menuHome { background:url(resources/icons/menu/Home.png),url(../icons/menu/Home.png) no-repeat center; }

Here both URL's are present in the CSS property. So IE10 will fetch image from 1st URL and Chrome will fetch image from 2nd url.