asizer/index.html

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

<head>
  <title>Simulating 5 webmap loads in Cascade</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',
        popup: {
          layerId: 'NBI_by_county_state_and_zip_9351',
          fieldName: 'OBJECTID_1',
          fieldValue: 651,
          anchorPoint: {
            'x': -10688954.731145648,
            'y': 4949964.179031948,
            'spatialReference': {
              'wkid': 102100
            }
          }
        }
      }, {
        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
              }
            })
          }
        },
        popup: {
          'layerId': 'National_Bridge_Inventory_2013_3794',
          'fieldName': 'OBJECTID',
          'fieldValue': 84243,
          'anchorPoint': {
            'x': -9088507.636632755,
            'y': 3542948.959996691,
            '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'],
        popup: {
          'layerId': 'featColl_4094_3304_0',
          'fieldName': 'FID',
          'fieldValue': 3,
          'anchorPoint': {
            'x': -8146874.841023788,
            'y': 5035188.716466351,
            'spatialReference': {
              'wkid': 102100
            }
          }
        }
      }, {
        type: 'webmap',
        id: 'e6d5c9a33489482bb7fb6efeb3c0f8d6',
        layers: ['Airports_Cargo_Passengers_3360'],
        popup: {
          'layerId': 'Airports_Cargo_Passengers_3360',
          'fieldName': 'FID',
          'fieldValue': 123,
          'anchorPoint': {
            'x': -9389440.912738346,
            'y': 3949169.5451040464,
            'spatialReference': {
              'wkid': 102100
            }
          }
        }
      }];

      $('.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);
          });

          if (media.popup) {
            showPopup(map, media.popup);
          }

        });
      }

      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 showPopup(map, popupOptions) {
        var lyr = map.getLayer(popupOptions.layerId);
        if (lyr) {
          var q = new Query();
          if (popupOptions.fieldName === lyr.objectIdField && lyr.graphics.length) {
            q.objectIds = [popupOptions.fieldValue];
          } else {
            q.where = popupOptions.fieldName + ' = ' + popupOptions.fieldValue;
          }
          q.outFields = ['*'];
          lyr.queryFeatures(q, function(featureSet) {
            if (!featureSet.features.length) {
              console.debug(lyr, q, map);
            }
            map.infoWindow.setFeatures(featureSet.features);
            map.infoWindow.show(new Point(popupOptions.anchorPoint));
          }, function(err) {
            console.debug(err, lyr, q, map);
          });
        } else {
          console.debug('no layer?!?', popupOptions);
        }
      }

      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
  and a popup on a particular feature.
  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</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',
	popup: {
	layerId: 'NBI_by_county_state_and_zip_9351',
	fieldName: 'OBJECTID_1',
	fieldValue: 651,
	anchorPoint: {
	'x': -10688954.731145648,
	'y': 4949964.179031948,
	'spatialReference': {
	'wkid': 102100
	}
	}
	}
	}, {
	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
	}
	})
	}
	},
	popup: {
	'layerId': 'National_Bridge_Inventory_2013_3794',
	'fieldName': 'OBJECTID',
	'fieldValue': 84243,
	'anchorPoint': {
	'x': -9088507.636632755,
	'y': 3542948.959996691,
	'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'],
	popup: {
	'layerId': 'featColl_4094_3304_0',
	'fieldName': 'FID',
	'fieldValue': 3,
	'anchorPoint': {
	'x': -8146874.841023788,
	'y': 5035188.716466351,
	'spatialReference': {
	'wkid': 102100
	}
	}
	}
	}, {
	type: 'webmap',
	id: 'e6d5c9a33489482bb7fb6efeb3c0f8d6',
	layers: ['Airports_Cargo_Passengers_3360'],
	popup: {
	'layerId': 'Airports_Cargo_Passengers_3360',
	'fieldName': 'FID',
	'fieldValue': 123,
	'anchorPoint': {
	'x': -9389440.912738346,
	'y': 3949169.5451040464,
	'spatialReference': {
	'wkid': 102100
	}
	}
	}
	}];

	$('.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);
	});

	if (media.popup) {
	showPopup(map, media.popup);
	}

	});
	}

	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 showPopup(map, popupOptions) {
	var lyr = map.getLayer(popupOptions.layerId);
	if (lyr) {
	var q = new Query();
	if (popupOptions.fieldName === lyr.objectIdField && lyr.graphics.length) {
	q.objectIds = [popupOptions.fieldValue];
	} else {
	q.where = popupOptions.fieldName + ' = ' + popupOptions.fieldValue;
	}
	q.outFields = ['*'];
	lyr.queryFeatures(q, function(featureSet) {
	if (!featureSet.features.length) {
	console.debug(lyr, q, map);
	}
	map.infoWindow.setFeatures(featureSet.features);
	map.infoWindow.show(new Point(popupOptions.anchorPoint));
	}, function(err) {
	console.debug(err, lyr, q, map);
	});
	} else {
	console.debug('no layer?!?', popupOptions);
	}
	}

	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
	and a popup on a particular feature.
	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>