asizer/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <title>Simulating 5 webmap loads in Cascade, no popups</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no,width=device-width" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

  <link rel="stylesheet" href="http://js.arcgis.com/3.19/esri/css/esri.css">
  <script
    src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous">
  </script>

  <style>
    html, body {
      width: 100%;
      margin: 0;
      padding: 0;
    }
    .text-divider {
      background-color: gray;
      color: #eee;
      width: 100%;
      height: 1.5em;
      font-size: 30px;
      text-align: center;
      line-height: 1.5em;
    }

    .text-divider table {
      width: 100%;
      height: 100%;
    }

    .explainer {
      height: auto;
      width: 100%;
      line-height: 1.4em;
      font-size: 16px;
      padding: 10px 20px;
      box-sizing: border-box;
      background-color: #bf40bf;
      color: white;
    }

    @media (max-device-width: 1000px) {
      .text-divider {
        font-size: 12px;
        height: 2em;
        line-height: 1.5em;
      }
      .explainer {
        font-size: 12px;
      }
    }

    .my-map {
      height: 40vh;
      width: 80%;
      margin: 0 19% 0 0%;
    }

  </style>
  <script src="http://js.arcgis.com/3.19/"></script>
  <script>
    var maps = [];
    var canvasCounter = 0;
    var lostCounter = 0;
    var timeoutSeconds = 3;

    require([
      'esri/arcgis/utils',
      'esri/geometry/Extent',
      'esri/tasks/query',
      'esri/geometry/Point',
      'dojo/on'
    ], function(arcgisUtils, Extent, Query, Point, dojoOn) {

      var medias = [{
        type: 'webmap',
        id: '26e7bf668ba943c0bc63f7a38259a6ca'
      }, {
        type: 'webmap',
        id: 'e6d5c9a33489482bb7fb6efeb3c0f8d6',
        layers: ['National_Bridge_Inventory_2013_3794'],
        options: {
          mapOptions: {
            extent: new Extent({
              'xmin': -9111324.08957585,
              'ymin': 3524642.291722416,
              'xmax': -9055983.681097455,
              'ymax': 3561561.3763841065,
              'spatialReference': {
                'wkid': 102100
              }
            })
          }
        }
      }, {
        type: 'webmap',
        id: 'e6d5c9a33489482bb7fb6efeb3c0f8d6',
        layers: ['USA_States_Generalized_4441', 'Bad_roads_2295_6768', 'Bad_roads_2295']
      }, {
        type: 'webmap',
        id: 'e6d5c9a33489482bb7fb6efeb3c0f8d6',
        layers: ['ShipRoutes_7525', 'World_Ocean_Reference_5411', 'World_Ocean_Base_988', 'featColl_4094_3304_0'],
      }, {
        type: 'webmap',
        id: 'e6d5c9a33489482bb7fb6efeb3c0f8d6',
        layers: ['Airports_Cargo_Passengers_3360'],
      }];

      $('.timeout-seconds').text(timeoutSeconds);

      medias.forEach(function(media, i) {
        setTimeout(function() {
          loadWebmap(media, i);
        }, timeoutSeconds * 1000 * i);
      });

      function loadWebmap(media, i) {
        setLoadingText(i);
        arcgisUtils.createMap(media.id, 'map' + i, media.options || null).then(function(response) {

          resetCurrentlyLoadingCounters(i);

          var map = response.map;
          maps.push(map);
          configureMapLayers(media.layers, map);

          dojoOn.once(map, 'update-end', function() {
            setCanvasListeners(map.container);
          });

        });
      }

      function configureMapLayers(layerIds, map) {
        if (layerIds) {
          layerIds.forEach(function(lyrId) {
            setLayerVisible(map, lyrId);
          });
        }
      }

      function setLayerVisible(map, lyrId) {
        var lyr = map.getLayer(lyrId);
        if (lyr) {
          lyr.setVisibility(true);
        }
      }

      function setLoadingText(i) {
        $('.text-divider').css('background-color', 'dodgerblue');
        var oldLoading = $('.currently-loading').first().text().trim();
        var newText = '  ' + i;
        $('.currently-loading').text(oldLoading + newText);
      }

      function resetCurrentlyLoadingCounters(i) {
        var oldLoading = $('.currently-loading').first().text();
        var newText = oldLoading.replace(new RegExp(i, 'g'), '');
        $('.currently-loading').text(newText);

        if (!newText.trim()) {
          $('.text-divider').css('background-color', 'gray');
        }
      }

      function setCanvasListeners(mapContainer) {
        $(mapContainer).find('canvas').each(function(i, canvas) {
          $('.canvas-counter').html(++canvasCounter);
          $(canvas).on('webglcontextlost', function() {
            $('.lost-counter').html(++lostCounter);
            console.debug('webglcontextlost');
          });
        });
      }
    });


  </script>
</head>

<body>
  <div class="explainer">
  (Blue divider backgrounds mean a webmap is currently loading.)
  This app loads one non-VTL webmap and then a different webmap with 8 VTL's four times, at <span class="timeout-seconds"></span> second intervals, with different layers visible.
  There are no listeners or timeouts or waiting for events happening.<br>
  This crashes iOS Safari pretty consistently -- about 1/3 of the time.
  </div>
  <div class="text-divider">
    <table>
      <tr>
        <td>Map 0 below</td>
        <td>Canvases: <span class="canvas-counter"></span></td>
        <td>Lost: <span class="lost-counter"></span></td>
        <td>Loading index: <span class="currently-loading"></span></td>
        <td>Waiting indices: <span class="currently-waiting"></span></td>
      </tr>
    </table>
  </div>
  <div id="map0" class="my-map"></div>

  <div class="text-divider">
    <table>
      <tr>
        <td>Map 0 below</td>
        <td>Canvases: <span class="canvas-counter"></span></td>
        <td>Lost: <span class="lost-counter"></span></td>
        <td>Loading index: <span class="currently-loading"></span></td>
        <td>Waiting indices: <span class="currently-waiting"></span></td>
      </tr>
    </table>
  </div>
  <div id="map1" class="my-map"></div>

  <div class="text-divider">
    <table>
      <tr>
        <td>Map 0 below</td>
        <td>Canvases: <span class="canvas-counter"></span></td>
        <td>Lost: <span class="lost-counter"></span></td>
        <td>Loading index: <span class="currently-loading"></span></td>
        <td>Waiting indices: <span class="currently-waiting"></span></td>
      </tr>
    </table>
  </div>
  <div id="map2" class="my-map"></div>

  <div class="text-divider">
    <table>
      <tr>
        <td>Map 0 below</td>
        <td>Canvases: <span class="canvas-counter"></span></td>
        <td>Lost: <span class="lost-counter"></span></td>
        <td>Loading index: <span class="currently-loading"></span></td>
        <td>Waiting indices: <span class="currently-waiting"></span></td>
      </tr>
    </table>
  </div>
  <div id="map3" class="my-map"></div>

  <div class="text-divider">
    <table>
      <tr>
        <td>Map 0 below</td>
        <td>Canvases: <span class="canvas-counter"></span></td>
        <td>Lost: <span class="lost-counter"></span></td>
        <td>Loading index: <span class="currently-loading"></span></td>
        <td>Waiting indices: <span class="currently-waiting"></span></td>
      </tr>
    </table>
  </div>
  <div id="map4" class="my-map"></div>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Simulating 5 webmap loads in Cascade, no popups</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no,width=device-width" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">

	<link rel="stylesheet" href="http://js.arcgis.com/3.19/esri/css/esri.css">
	<script
	src="https://code.jquery.com/jquery-3.1.1.min.js"
	integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
	crossorigin="anonymous">
	</script>

	<style>
	html, body {
	width: 100%;
	margin: 0;
	padding: 0;
	}
	.text-divider {
	background-color: gray;
	color: #eee;
	width: 100%;
	height: 1.5em;
	font-size: 30px;
	text-align: center;
	line-height: 1.5em;
	}

	.text-divider table {
	width: 100%;
	height: 100%;
	}

	.explainer {
	height: auto;
	width: 100%;
	line-height: 1.4em;
	font-size: 16px;
	padding: 10px 20px;
	box-sizing: border-box;
	background-color: #bf40bf;
	color: white;
	}

	@media (max-device-width: 1000px) {
	.text-divider {
	font-size: 12px;
	height: 2em;
	line-height: 1.5em;
	}
	.explainer {
	font-size: 12px;
	}
	}

	.my-map {
	height: 40vh;
	width: 80%;
	margin: 0 19% 0 0%;
	}

	</style>
	<script src="http://js.arcgis.com/3.19/"></script>
	<script>
	var maps = [];
	var canvasCounter = 0;
	var lostCounter = 0;
	var timeoutSeconds = 3;

	require([
	'esri/arcgis/utils',
	'esri/geometry/Extent',
	'esri/tasks/query',
	'esri/geometry/Point',
	'dojo/on'
	], function(arcgisUtils, Extent, Query, Point, dojoOn) {

	var medias = [{
	type: 'webmap',
	id: '26e7bf668ba943c0bc63f7a38259a6ca'
	}, {
	type: 'webmap',
	id: 'e6d5c9a33489482bb7fb6efeb3c0f8d6',
	layers: ['National_Bridge_Inventory_2013_3794'],
	options: {
	mapOptions: {
	extent: new Extent({
	'xmin': -9111324.08957585,
	'ymin': 3524642.291722416,
	'xmax': -9055983.681097455,
	'ymax': 3561561.3763841065,
	'spatialReference': {
	'wkid': 102100
	}
	})
	}
	}
	}, {
	type: 'webmap',
	id: 'e6d5c9a33489482bb7fb6efeb3c0f8d6',
	layers: ['USA_States_Generalized_4441', 'Bad_roads_2295_6768', 'Bad_roads_2295']
	}, {
	type: 'webmap',
	id: 'e6d5c9a33489482bb7fb6efeb3c0f8d6',
	layers: ['ShipRoutes_7525', 'World_Ocean_Reference_5411', 'World_Ocean_Base_988', 'featColl_4094_3304_0'],
	}, {
	type: 'webmap',
	id: 'e6d5c9a33489482bb7fb6efeb3c0f8d6',
	layers: ['Airports_Cargo_Passengers_3360'],
	}];

	$('.timeout-seconds').text(timeoutSeconds);

	medias.forEach(function(media, i) {
	setTimeout(function() {
	loadWebmap(media, i);
	}, timeoutSeconds * 1000 * i);
	});

	function loadWebmap(media, i) {
	setLoadingText(i);
	arcgisUtils.createMap(media.id, 'map' + i, media.options \|\| null).then(function(response) {

	resetCurrentlyLoadingCounters(i);

	var map = response.map;
	maps.push(map);
	configureMapLayers(media.layers, map);

	dojoOn.once(map, 'update-end', function() {
	setCanvasListeners(map.container);
	});

	});
	}

	function configureMapLayers(layerIds, map) {
	if (layerIds) {
	layerIds.forEach(function(lyrId) {
	setLayerVisible(map, lyrId);
	});
	}
	}

	function setLayerVisible(map, lyrId) {
	var lyr = map.getLayer(lyrId);
	if (lyr) {
	lyr.setVisibility(true);
	}
	}

	function setLoadingText(i) {
	$('.text-divider').css('background-color', 'dodgerblue');
	var oldLoading = $('.currently-loading').first().text().trim();
	var newText = ' ' + i;
	$('.currently-loading').text(oldLoading + newText);
	}

	function resetCurrentlyLoadingCounters(i) {
	var oldLoading = $('.currently-loading').first().text();
	var newText = oldLoading.replace(new RegExp(i, 'g'), '');
	$('.currently-loading').text(newText);

	if (!newText.trim()) {
	$('.text-divider').css('background-color', 'gray');
	}
	}

	function setCanvasListeners(mapContainer) {
	$(mapContainer).find('canvas').each(function(i, canvas) {
	$('.canvas-counter').html(++canvasCounter);
	$(canvas).on('webglcontextlost', function() {
	$('.lost-counter').html(++lostCounter);
	console.debug('webglcontextlost');
	});
	});
	}
	});


	</script>
	</head>

	<body>
	<div class="explainer">
	(Blue divider backgrounds mean a webmap is currently loading.)
	This app loads one non-VTL webmap and then a different webmap with 8 VTL's four times, at <span class="timeout-seconds"></span> second intervals, with different layers visible.
	There are no listeners or timeouts or waiting for events happening.<br>
	This crashes iOS Safari pretty consistently -- about 1/3 of the time.
	</div>
	<div class="text-divider">
	<table>
	<tr>
	<td>Map 0 below</td>
	<td>Canvases: <span class="canvas-counter"></span></td>
	<td>Lost: <span class="lost-counter"></span></td>
	<td>Loading index: <span class="currently-loading"></span></td>
	<td>Waiting indices: <span class="currently-waiting"></span></td>
	</tr>
	</table>
	</div>
	<div id="map0" class="my-map"></div>

	<div class="text-divider">
	<table>
	<tr>
	<td>Map 0 below</td>
	<td>Canvases: <span class="canvas-counter"></span></td>
	<td>Lost: <span class="lost-counter"></span></td>
	<td>Loading index: <span class="currently-loading"></span></td>
	<td>Waiting indices: <span class="currently-waiting"></span></td>
	</tr>
	</table>
	</div>
	<div id="map1" class="my-map"></div>

	<div class="text-divider">
	<table>
	<tr>
	<td>Map 0 below</td>
	<td>Canvases: <span class="canvas-counter"></span></td>
	<td>Lost: <span class="lost-counter"></span></td>
	<td>Loading index: <span class="currently-loading"></span></td>
	<td>Waiting indices: <span class="currently-waiting"></span></td>
	</tr>
	</table>
	</div>
	<div id="map2" class="my-map"></div>

	<div class="text-divider">
	<table>
	<tr>
	<td>Map 0 below</td>
	<td>Canvases: <span class="canvas-counter"></span></td>
	<td>Lost: <span class="lost-counter"></span></td>
	<td>Loading index: <span class="currently-loading"></span></td>
	<td>Waiting indices: <span class="currently-waiting"></span></td>
	</tr>
	</table>
	</div>
	<div id="map3" class="my-map"></div>

	<div class="text-divider">
	<table>
	<tr>
	<td>Map 0 below</td>
	<td>Canvases: <span class="canvas-counter"></span></td>
	<td>Lost: <span class="lost-counter"></span></td>
	<td>Loading index: <span class="currently-loading"></span></td>
	<td>Waiting indices: <span class="currently-waiting"></span></td>
	</tr>
	</table>
	</div>
	<div id="map4" class="my-map"></div>

	</body>

	</html>