Chrome 43 breaks Sencha Touch / modern toolkit and how to fix it.

Posted on in Ext JS 6 Sencha Touch

Lately, I received a couple of questions about the latest Chrome 43.x
version, which breaks Sencha Touch 2.4 apps (or Ext JS 6 modern toolkit apps) due the deprecation of the overflowchanged event.

It actually breaks the following classes: Ext.util.PaintMonitor and Ext.util.SizeMonitor.
You will notice this bug when trying to scroll in a list component.
You will see a small square in the top right corner, instead of the familiar scroll bar, and it's impossible to scroll.

As the day of writing this blogpost, Sencha is currently fixing this bug in Sencha Touch and in Ext JS 6 modern toolkit.
When you are a Sencha support subscriber, you will have access to our support portal, and probably by the time of reading this, you will be able to download the latest nightly build, which includes this fix.

If you can't wait, and temporary want to fix this issue, (for example because it's blocking you from development) you can use an override. You can use the following override classes. (PaintMonitor and SizeMonitor).
Just require these in your app.js.
I am hosting an example app on Github, feel free to clone it:
https://github.com/savelee/senchatouch-chrome43.

Thanks Trevor Brindle, for sharing parts of your solution.

There is another small problem with the load spinner in Sencha Touch applications; Ext.LoadMask is no longer animated.
This is a simple fix in the Sass (touch/resources/themes/stylesheets/sencha-touch/base/src/_Class.scss) the prefixes for keyframe and transform aren't used anymore.
In case you want to quickfix this in your app, you can add the following styles to your application stylesheet (and make a build):
app.scss

Again, this probably will be fixed in the latest nightly build.
So if possible, switch to that, instead of manually patching stuff.

For further information about these Chrome changes, take a look into the links below.

Comments

  1. Jon says on
    May 27, 2015 at 3:48 pm
    Reply

    Hey,
    I think the toggle field is also broken in Chrome 43 (using Sencha Touch 2.4.1)

  2. vishvas says on
    May 29, 2015 at 6:56 am
    Reply

    Hi lee. thanks for this fix…. it worked.

  3. Rob Boerman says on
    May 29, 2015 at 9:32 am
    Reply

    You’re a champ Lee! You stopped me just before pulling my hair out. Thanks for sharing

  4. Jerônimo says on
    May 29, 2015 at 1:29 pm
    Reply

    Thank you very very very very very much!!!!

  5. Tony OHagan says on
    June 4, 2015 at 2:18 am
    Reply

    Thanks Lee …

    Just posted your fix to Google+ Asia Pacific Sencha

  6. Dennis says on
    June 6, 2015 at 9:30 am
    Reply

    Thank god, you saved my job!!! I’m in time trouble and sitting at work on week end, and now THIS!! If you like, I’d like to send you a donation 🙂

    • Lee says on
      June 8, 2015 at 5:10 pm
      Reply

      🙂 You’re welcome. No need for a donation. – Just share my website with others, so I can help them as well!

  7. Chris Jesus says on
    June 8, 2015 at 1:54 pm
    Reply

    I owe you a coke! Thanks :)))

    • Lee says on
      June 8, 2015 at 5:10 pm
      Reply

      🙂

  8. Rainer says on
    June 9, 2015 at 9:06 pm
    Reply

    Thank you so much!!! Great work!

  9. Blueming says on
    June 9, 2015 at 9:48 pm
    Reply

    Thank you!!!!! Very Very

  10. Christian Gräfe says on
    June 10, 2015 at 10:50 am
    Reply

    This saved my day. Thanks for this solution. The carousel was also broken, but with your solution it is working again.

  11. April says on
    June 10, 2015 at 7:07 pm
    Reply

    THANK YOU! OMG Thank You. Thank you thank you thank you thank you.. hugs thank you.. totally made my day, week and month. 😉 You’re my first stop for solutions from now on.

  12. Annika says on
    June 11, 2015 at 12:58 pm
    Reply

    Thank you so much for this, saved my day 🙂 !

  13. bwags says on
    June 12, 2015 at 5:59 pm
    Reply

    Saved me hours,

    Thanks so much!

  14. tntung says on
    June 17, 2015 at 10:20 am
    Reply

    Many thanks you, Lee 🙂

  15. Shanmugapriya says on
    June 18, 2015 at 8:08 am
    Reply

    Hi lee,

    Thank you very much. you saved my time. once again thank you very very very much.

  16. Christopher Elwell says on
    June 20, 2015 at 12:34 am
    Reply

    Some users experienced this on new versions of Android as well. Hopefully this fix will work for that too.

  17. Adrian says on
    June 23, 2015 at 9:25 am
    Reply

    Hi Lee,

    thanks for the fix!
    This solved my problem.

  18. Prasanth says on
    June 24, 2015 at 7:22 am
    Reply

    thanks alot. you saved my hrs.

  19. Shenglin Xu says on
    June 26, 2015 at 4:41 pm
    Reply

    Fixed toggle field. We use Sencha Touch version 2.3.1. Also fixed painted (component) event not firing issue.
    Thanks a lot.

  20. Paul says on
    July 8, 2015 at 4:10 am
    Reply

    THANK YOU!

  21. Steffen says on
    July 27, 2015 at 9:29 am
    Reply

    Nice summary of the issue and perfect fixes,
    tnx

  22. Pandu says on
    August 11, 2015 at 10:53 am
    Reply

    Hi Lee,

    I have downloaded github chrome43 scroll bar issue code. I made changes in index.html to to app.js. But it is not working in emulator of chrome.
    Please help to sort this issue.

    • Lee says on
      August 12, 2015 at 12:35 pm
      Reply

      Hi Pandu. Please download the latest Sencha Touch build from the sencha.com website. Version 2.4.2 is a stable version.

  23. sandeep says on
    August 11, 2015 at 12:41 pm
    Reply

    The overrides didn’t work for me, is there is any other fix for the scrolling issue.

    • Lee says on
      August 12, 2015 at 12:34 pm
      Reply

      Yep. You should download the latest Sencha Touch build from the sencha.com website. – It’s stable now.

  24. laur says on
    August 18, 2015 at 2:24 pm
    Reply

    Hi Lee,

    Thank you for this fix, it saved our app and a great deal of work.

  25. Park and Save says on
    September 5, 2015 at 5:44 pm
    Reply

    Works great. Many thanks !!

  26. Jemai Kais says on
    November 9, 2015 at 10:52 am
    Reply

    Hi Lee,
    Thank you 🙂

  27. daggeto says on
    April 9, 2016 at 2:19 pm
    Reply

    Thank you !!!

Post a Comment

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