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

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][1] 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][2] (who is also a Sencha employee) which seemed to do the job. Credit for this solution also goes to [Trevor Brindle][3] 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 () {
    // 
    console.info("Ext.util.PaintMonitor temp. fix is active");
    // 
});
```

**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 () {
    // 
    console.info("Ext.util.SizeMonitor temp. fix is active");
    // 
});
```

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!


  

  


 [1]: https://www.sencha.com/forum/announcement.php?f=90&a=58
 [2]: https://github.com/savelee/senchatouch-chrome43
 [3]: http://trevorbrindle.com/chrome-43-broke-sencha/

Follow me on Twitter or subscribe to me on YouTube for more web development content.

Check out my latest videos: