CODEWITHSUNDEEP
javascriptinternet-explorerpromisebluebirdaurelia
Saadh
Saadh

Reputation: 39

IE11 promise strange behaviour

We have noticed really strange behaviour in IE11 when starting Aurelia application. It occurs only if it is first time you start app in new window/tab AND mouse cursor is NOT in IE window area (for example program is run from command line with given url - which is important scenario for us). Application then stays on index.html with static content but and nothing happens. Until you move cursor over window... Then magically app continues without any errors and any issues.

As far as I could debug, issue occurs when script enters System.import('core-js') promise. It happens with or without using bluebird promise.

This is body from "index.html".

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.import('core-js').then(function () {
    return System.import('webcomponents.js/MutationObserver');
  }).then(function () {
    return System.import('aurelia-bootstrapper');
  });
</script>

EDIT:

I noticed that what helps is to put promise with timeout (at least 1000ms). Do you have any idea if any better solution exists?

<script src="jspm_packages/npm/[email protected]/js/browser/bluebird.js"></script>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
    // IE11 hack for mutation observer/promises error
    var promise = new Promise(function (resolve) {
        window.setTimeout(
            function () {
                resolve();
            }, 1000);
    });

    System.import('core-js').then(function() {
        return System.import('webcomponents.js/MutationObserver');
    }).then(function() {
        return System.import('aurelia-bootstrapper');
    });
</script>

Upvotes: 1

Views: 1745

Answers (1)

Benjamin Gruenbaum
Benjamin Gruenbaum

Reputation: 276496

Here is a workaround for the bug which is caused by IE11 mutation observer behavior w.r.t scheduling. This workaround works with bluebird but not other polyfills:

 // use timers for scheduling
 Promise.setScheduler(function(fn) { setTimeout(fn); });

Upvotes: 1

Related Questions