CODEWITHSUNDEEP
cross-browsersencha-touch-2
osantos
osantos

Reputation: 414

Sencha touch test application works as expected in Firefox but not in Chrome or iOS or Android

Here is something weird I am facing. I am new to sencha and Javascript but have been doing some testing for some time now. I read that the best desktop browser to test your sencha touch 2 apps was Chrome since it is a web-kit based and that Firefox would not work.

I have created a Web App that uses Sencha Touch 2 carousel, lists and stores fetching data from a .json file.

the application at this point has two different screens which you can see below as seen when accessed through Firefox browser:

enter image description here enter image description here

As you can see both the carousel and the Event list display and work as expected when using Firefox (wich I though should be the browser in which the code should not work.

When I access this exact same code with Google Chrome, I get the following:

enter image description here enter image description here

As you can see it does not make much sense to me that code that works in Firefox is not working in Chrome (which should be a better browser for testing Sencha Touch).

furthermore, if I run these same code in an android and an iOS device the result is that the first screen, the one with the carousel, displays perfectly, but the event list does not display any events init, just like what happened in chrome but with the only difference that the title on the top this time is correctly displayed. At least this time both the iOS and the Android browser behave the same way.

I have used standard sencha views, stores and models and I am not aware of having done anything browser specific.

Any idea of why this differences might be showing? Why is Chrome not working at all while firefox works just fine?

Thanks Oriol

Upvotes: 0

Views: 1120

Answers (1)

kevhender
kevhender

Reputation: 4405

Looks like you are probably experiencing the Sencha Touch - Chrome 29 bug. See how to fix this here: http://www.sencha.com/forum/announcement.php?f=90&a=43

In summary, this is what to do:

In project directory edit the file resources/themes/stylesheets/sencha-touch/base/mixins/_Class.scss so that st-box mixin looks like the following:

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

Then open command prompt, move to resources/sass directory and execute compass compile. Before doing this Make sure Ruby is installed and that compass is also configured.

Upvotes: 1

Related Questions