GameConfig.stableSort is a new optional property that will control if the internal depth sorting routine uses our own StableSort function, or the built-in browser Array.sort one. Only modern browsers have a _stable_ Array.sort implementation, which Phaser requires. Older ones need to use our function instead. Set to 1 to use the legacy version, 0 to use the ES2019 version or -1 to have Phaser try and detect which is best for the browser

Ref #6217

src/core/Config.js

@@ -182,22 +182,9 @@ var Config = new Class({
          */
         this.stableSort = GetValue(config, 'stableSort', -1);
 
-        if (this.stableSort === -1)
+        if (this.stableSort === -1 && Device.browser.es2019)
         {
-            //  Try and determine it automatically
-            var browser = Device.browser;
-
-            if (
-                browser.ie ||
-                browser.silk ||
-                browser.trident ||
-                (browser.chrome && browser.chromeVersion < 70) ||
-                (browser.firefox && browser.firefoxVersion < 100) ||
-                (browser.safari && browser.safariVersion < 11)
-            )
-            {
-                this.stableSort = 1;
-            }
+            this.stableSort = 0;
         }
 
         //  DOM Element Container

src/core/typedefs/GameConfig.js

@@ -6,6 +6,7 @@
  * @property {(number|string)} [height=768] - The height of the game, in game pixels.
  * @property {number} [zoom=1] - Simple scale applied to the game canvas. 2 is double size, 0.5 is half size, etc.
  * @property {number} [type=CONST.AUTO] - Which renderer to use. Phaser.AUTO, Phaser.CANVAS, Phaser.HEADLESS, or Phaser.WEBGL. AUTO picks WEBGL if available, otherwise CANVAS.
+ * @property {(number|boolean)} [stableSort=-1] - `true` or `1` = Use the built-in StableSort (needed for older browsers), `false` or `0` = Rely on ES2019 Array.sort being stable (modern browsers only), or `-1` = Try and determine this automatically based on browser inspection (not guaranteed to work, errs on side of caution).
  * @property {(HTMLElement|string)} [parent=undefined] - The DOM element that will contain the game canvas, or its `id`. If undefined, or if the named element doesn't exist, the game canvas is appended to the document body. If `null` no parent will be used and you are responsible for adding the canvas to the dom.
  * @property {HTMLCanvasElement} [canvas=null] - Provide your own Canvas element for Phaser to use instead of creating one.
  * @property {string} [canvasStyle=null] - CSS styles to apply to the game canvas instead of Phasers default styles.

src/utils/array/StableSort.js

@@ -5,6 +5,8 @@
  * @license      {@link https://opensource.org/licenses/MIT|MIT License}
  */
 
+var Device = require('../../device');
+
 /**
  * The comparator function.
  *
@@ -32,14 +34,6 @@ function Compare (a, b)
  */
 function Process (array, compare)
 {
-    // Short-circuit when there's nothing to sort.
-    var len = array.length;
-
-    if (len <= 1)
-    {
-        return array;
-    }
-
     // Rather than dividing input, simply iterate chunks of 1, 2, 4, 8, etc.
     // Chunks are the size of the left or right hand in merge sort.
     // Stop when the left-hand covers all of the array.
@@ -156,6 +150,19 @@ var StableSort = function (array, compare)
 {
     if (compare === undefined) { compare = Compare; }
 
+    // Short-circuit when there's nothing to sort.
+    var len = array.length;
+
+    if (len <= 1)
+    {
+        return array;
+    }
+
+    if (Device.browser.es2019)
+    {
+        return array.sort(compare);
+    }
+
     var result = Process(array, compare);
 
     // This simply copies back if the result isn't in the original array, which happens on an odd number of passes.