Tutorial hero
Lesson icon

The Chrome 43 Update Broke Sencha Touch Apps, Here's How to Fix It

Originally published June 12, 2015 Time 6 mins

There’s nothing quite as frustrating as having a tested and working application, only to open it up one day and discover it’s… not working. This is an experience many Sencha Touch developers will have had recently, as the latest Chrome update (Chrome 43) caused some bugs in Sencha Touch applications. The issue would occur if you try to view the application in a Chrome browser or the latest System Web View on Android devices.

I first noticed the issue when I loaded up one of my Sencha Touch applications in Chrome on a desktop computer and the scrollable portion of my interface was missing. I had to scroll before it would show up at all. Developers were reporting a range of issues and I’m sure there were more problems with my app as well.

How to Fix Chrome 43 Bugs

So of course, I turned to Google. Before too long I found this announcment from Mitchell Simoens. He lists the problems caused by Chrome 43 and some fixes for them (both for EXT JS and Sencha Touch). The fixes for Sencha Touch specifically were to add the following to app.js (before Ext.application()):

Ext.define('Override.util.PaintMonitor', {
    override : 'Ext.util.PaintMonitor',

    constructor : function(config) {
        return new Ext.util.paintmonitor.CssAnimation(config);
    }
});

Ext.define('Override.util.SizeMonitor', {
    override : 'Ext.util.SizeMonitor',

    constructor : function(config) {
        var namespace = Ext.util.sizemonitor;

        if (Ext.browser.is.Firefox) {
            return new namespace.OverflowChange(config);
        } else if (Ext.browser.is.WebKit || Ext.browser.is.IE11) {
            return new namespace.Scroll(config);
        } else {
            return new namespace.Default(config);
        }
    }
});

and the following to your app.scss file to fix the issue where the loading spinner would not spin:

@keyframes x-loading-spinner-rotate {
  0%{     -ms-transform: rotate(0deg); transform: rotate(0deg); }
  8.32%{  -ms-transform: rotate(0deg); transform: rotate(0deg); }

  8.33%{  -ms-transform: rotate(30deg); transform: rotate(30deg); }
  16.65%{ -ms-transform: rotate(30deg); transform: rotate(30deg); }

  16.66%{ -ms-transform: rotate(60deg); transform: rotate(60deg); }
  24.99%{ -ms-transform: rotate(60deg); transform: rotate(60deg); }

  25%{    -ms-transform: rotate(90deg); transform: rotate(90deg); }
  33.32%{ -ms-transform: rotate(90deg); transform: rotate(90deg); }

  33.33%{ -ms-transform: rotate(120deg); transform: rotate(120deg); }
  41.65%{ -ms-transform: rotate(120deg); transform: rotate(120deg); }

  41.66%{ -ms-transform: rotate(150deg); transform: rotate(150deg); }
  49.99%{ -ms-transform: rotate(150deg); transform: rotate(150deg); }

  50%{    -ms-transform: rotate(180deg); transform: rotate(180deg); }
  58.32%{ -ms-transform: rotate(180deg); transform: rotate(180deg); }

  58.33%{ -ms-transform: rotate(210deg); transform: rotate(210deg); }
  66.65%{ -ms-transform: rotate(210deg); transform: rotate(210deg); }

  66.66%{ -ms-transform: rotate(240deg); transform: rotate(240deg); }
  74.99%{ -ms-transform: rotate(240deg); transform: rotate(240deg); }

  75%{    -ms-transform: rotate(270deg); transform: rotate(270deg); }
  83.32%{ -ms-transform: rotate(270deg); transform: rotate(270deg); }

  83.33%{ -ms-transform: rotate(300deg); transform: rotate(300deg); }
  91.65%{ -ms-transform: rotate(300deg); transform: rotate(300deg); }

  91.66%{ -ms-transform: rotate(330deg); transform: rotate(330deg); }
  100%{   -ms-transform: rotate(330deg); transform: rotate(330deg); }
}

After implementing these fixes though, it seemed to break my iOS build (and possible the native Android build too, I never tried). I was never able to figure out why (since no errors were occuring), but when I added those two overrides to my application my launch() function would never been triggered, which meant I was stuck starting eternally at the splash screen.

With a little more digging I found this solution from Lee Boonstra (who is also a Sencha employee) which seemed to do the job. Credit for this solution also goes to Trevor Brindle who made a very useful blog post about this bug.

Instead of adding the overrides directly to app.js we add them as utility files and require them in app.js. To implement this solution you will need to create two files inside of a folder called util. They should look like this:

app/util/PaintMonitor.js

Ext.define('MyApp.util.PaintMonitor', {
    override: 'Ext.util.PaintMonitor',

    uses: [
        'Ext.env.Browser',
        'Ext.env.OS',
        'Ext.util.paintmonitor.CssAnimation',
        'Ext.util.paintmonitor.OverflowChange'
    ],

    constructor: function(config) {
        return new Ext.util.paintmonitor.CssAnimation(config);
    }

}, function () {
    // <debug>
    console.info("Ext.util.PaintMonitor temp. fix is active");
    // </debug>
});
</code>

app/util/SizeMonitor.js

Ext.define('MyApp.util.SizeMonitor', {
    override: 'Ext.util.SizeMonitor',

    uses: [
        'Ext.env.Browser',
        'Ext.util.sizemonitor.Default',
        'Ext.util.sizemonitor.Scroll',
        'Ext.util.sizemonitor.OverflowChange'
    ],

    //Thanks! http://trevorbrindle.com/chrome-43-broke-sencha/

    constructor: function (config) {
        var namespace = Ext.util.sizemonitor;

        if (Ext.browser.is.Firefox) {
            return new namespace.OverflowChange(config);
        } else if (Ext.browser.is.WebKit) {
            if (!Ext.browser.is.Silk && Ext.browser.engineVersion.gtEq('535') && !Ext.browser.engineVersion.ltEq('537.36')) {
                return new namespace.OverflowChange(config);
            } else {
                return new namespace.Scroll(config);
            }
        } else if (Ext.browser.is.IE11) {
            return new namespace.Scroll(config);
        } else {
            return new namespace.Scroll(config);
        }
    }
}, function () {
    // <debug>
    console.info("Ext.util.SizeMonitor temp. fix is active");
    // </debug>
});
</code>

Once you have those files created you should add them to your requires array at the top of app.js:

    requires: [
        'Ext.MessageBox',
        'MyApp.util.SizeMonitor', //TEMP fix, Chrome 43 bug
        'MyApp.util.PaintMonitor' //TEMP fix, Chrome 43 bug
    ],

Give either of those solutions a go and hopefully your app will be back to running normally again!

Learn to build modern Angular apps with my course