Fix: Chrome 29 breaks all Sencha Touch 2.* apps

Posted on in CSS Sass Sencha Sencha Touch

Please note: this bug won't occur with Sencha Touch 2.3 (and higher)

I have to admit, I am in love with the Google Chrome browser.
Except yesterday, Google Chrome automatically upgrades itselves to the latest version. This latest version, version 29, suddenly breaks all Sencha Touch 2.2 apps. And ya, you can't downgrade Google Chrome.
Oh no!

Well luckily it's not so hard to fix / patch the bug in the framework.
It actually has something to do with one of the base Sencha Touch stylesheets.

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 this post:
Sencha Touch default stylesheet: app.css)

Comments

  1. Alberto Fernandez says on
    August 23, 2013 at 11:48 am
    Reply

    Thank you too much. You saved my life.

  2. Andrés Palacio says on
    August 24, 2013 at 10:50 am
    Reply

    it works properly again, thanks.

  3. Alon Amir says on
    August 25, 2013 at 4:06 pm
    Reply

    Thanks! I had this issue too. luckily, your page was one of the first results on google.

  4. Lenins George says on
    August 26, 2013 at 6:38 am
    Reply

    Lee, the fix you mentioned didn’t fix the problem for me.
    docked right and flex right styles does not seem to work on sencha touch apps running in chrome 29.

  5. Lenins George says on
    August 26, 2013 at 6:43 am
    Reply

    Lee, after adding the patch, compass watch on touch/resources/sass did not make the changes reflected. But after building the application, it did work. Thaks for the tip.
    You just saved my ears from being blasted by my boss 😉

  6. Riyaad says on
    August 26, 2013 at 2:56 pm
    Reply

    Thanks for this (“,)

  7. marrygan says on
    August 28, 2013 at 9:40 am
    Reply

    This is very helpful. At the first time, I thought this error came from licensing stuff. 🙁

  8. Robert says on
    August 30, 2013 at 8:03 pm
    Reply

    Thanks for posting this Lee. I just found out today that our application had broken with the latest version of Chrome, and just had time to find out that flexbox broke.

    If I had a choice I’d stop using Chrome entirely. Each release from Google breaks something important. It’s as-if their QA department just doesn’t exist.

  9. alejandro says on
    September 16, 2013 at 8:29 pm
    Reply

    Thank you so much!

  10. farion says on
    September 17, 2013 at 1:39 pm
    Reply

    Thank you very much. Saved a lot of time.

  11. patrick kanyerezi says on
    October 1, 2013 at 10:16 am
    Reply

    Lee Boonstra Thanks for the quik fix. i was really dying silently with the bug. I’ma try the fix ASAP. DO i have to generate another app to apply the fix in the already apps. because changes are made to the framework not the app it’s self.

  12. patrick kanyerezi says on
    October 1, 2013 at 10:40 am
    Reply

    ooooopppss i followed every step but all the textareas are still not visible

  13. Christiaan says on
    October 9, 2013 at 11:18 am
    Reply

    When I first encountered this problem with Chrome I tried using Safari while developing. But as a half-blind programmer I had a problem reading the developer console of Safari being unable to change the font-size and all. Thanks to your fix i am able to use Chrome again, you really saved my day!

  14. franck birba says on
    October 10, 2013 at 12:56 am
    Reply

    awesome lee thank you for this post it corrected evrything for, i had 2 buggy apps…

  15. Hayrettin says on
    November 2, 2013 at 11:32 pm
    Reply

    This was really life saver. There was no way to understand even the problem if I wouldn’t check firefox. And almost nobody told about this problem on the net. Thank you!

  16. Markus says on
    September 18, 2014 at 3:48 pm
    Reply

    Thank you sooooooo much!!!!!! 🙂
    Greets from austria 🙂

  17. Dibeesh says on
    December 19, 2014 at 10:50 am
    Reply

    Thank you so much…its really awesome piece of code. saved my life

  18. Venkatesh Teja says on
    May 31, 2015 at 11:02 am
    Reply

    Hi Lee,

    I am using Sencha 2.1 version and I didn’t see the path you mentioned. So where should I add this code. Can you please provide answer quickly?

    Thanks in Advance…

Post a Comment

Your email is never published nor shared.
Required fields are marked *