Fix an issue with Chrome and hidden tabs.

When the webpage is on a hidden tab, tiles are not rendered.  This seems
to only be a problem with Chrome.  This adds 'hidden' and 'unhidden'
events, so any feature can hook into these.

The webgl tile layer refreshes its tile cache when unhidden.

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Bug Fixes
 - Removed extra calls to sceneObject constructors (#1039)
+- Fixed an issue with rendering on hidden tabs in Chrome (#1042)
 
 ## Version 0.19.7
 
@@ -15,13 +16,13 @@
 - When only updating point styles, don't recompute geometry transforms (#1022)
 - Optimized a transform code path for pixel coordinates (#1023)
 - WebGL point features automatically use the most memory-efficient primitive shape for the point sizes used based on the system's graphics capabilities (#1031)
-- Less data is transfered to the GPU when only styles have changed in webgl line or polygon features (#1016)
+- Less data is transferred to the GPU when only styles have changed in webgl line or polygon features (#1016)
 
 ### Changes
 - Switched the default tile server to Stamen Design's toner-lite (#1020)
 
 ### Bug Fixes
-- Mouse wheel events didn't recompute gcs coordinates, so a wheel event without a previous move event coult list the wrong location (#1027)
+- Mouse wheel events didn't recompute gcs coordinates, so a wheel event without a previous move event could list the wrong location (#1027)
 - Original event data was not included with actionwheel events (#1030)
 
 ## Version 0.19.6

src/event.js

@@ -115,6 +115,24 @@ geo_event.draw = 'geo_draw';
  */
 geo_event.drawEnd = 'geo_drawEnd';
 
+/**
+ * Triggered when the map is shown (the browser tab is made visible)
+ *
+ * @event geo.event.unhidden
+ * @type {geo.event.base}
+ * @property {geo.map} target The current map.
+ */
+geo_event.unhidden = 'geo_unhidden';
+
+/**
+ * Triggered when the map is hidden (the browser tab is no longer visible)
+ *
+ * @event geo.event.hidden
+ * @type {geo.event.base}
+ * @property {geo.map} target The current map.
+ */
+geo_event.hidden = 'geo_hidden';
+
 /**
  * Triggered on every `mousemove` over the map's DOM element unless a click
  * might occur.  The event object extends {@link geo.mouseState}.

src/map.js

@@ -907,6 +907,49 @@ var map = function (arg) {
     return m_this;
   };
 
+  /**
+   * Trigger an event when the browser is hidden or unhidden.
+   *
+   * See {@link geo.map.trackBrowserHidden}.
+   */
+  function handleBrowserHidden() {
+    var hidden;
+
+    if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support
+      hidden = 'hidden';
+    } else if (typeof document.msHidden !== 'undefined') {
+      hidden = 'msHidden';
+    } else if (typeof document.webkitHidden !== 'undefined') {
+      hidden = 'webkitHidden';
+    }
+    m_this.geoTrigger(document[hidden] ? geo_event.hidden : geo_event.unhidden);
+  }
+
+  /**
+   * Track when the browser tab is hidden or unhidden.
+   *
+   * Based on
+   * https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
+   * as accessed on 2019-10-24.
+   *
+   * @param {boolean} [enable] If `false`, remove the event listener.
+   */
+  function trackBrowserHidden(enable) {
+    var visibilityChange;
+
+    if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support
+      visibilityChange = 'visibilitychange';
+    } else if (typeof document.msHidden !== 'undefined') {
+      visibilityChange = 'msvisibilitychange';
+    } else if (typeof document.webkitHidden !== 'undefined') {
+      visibilityChange = 'webkitvisibilitychange';
+    }
+    document.removeEventListener(visibilityChange, handleBrowserHidden);
+    if (enable !== false) {
+      document.addEventListener(visibilityChange, handleBrowserHidden);
+    }
+  }
+
   /**
    * Initialize the map.
    *
@@ -923,6 +966,8 @@ var map = function (arg) {
     }
     m_node.addClass('geojs-map');
     m_node.data('data-geojs-map', m_this);
+
+    trackBrowserHidden();
     return m_this;
   };
 
@@ -947,6 +992,7 @@ var map = function (arg) {
    * empties the associated DOM node.
    */
   this.exit = function () {
+    trackBrowserHidden(false);
     var i, layers = m_this.children();
     for (i = layers.length - 1; i >= 0; i -= 1) {
       layers[i]._exit();

src/webgl/tileLayer.js

@@ -195,6 +195,9 @@ var webgl_tileLayer = function () {
    * Destroy.
    */
   this._exit = function () {
+    var map = m_this.map();
+    map.geoOff(geo_event.layerAdd, m_this._clearQuads);
+    map.geoOff(geo_event.layerRemove, m_this._clearQuads);
     m_this._cleanup();
     m_this.deleteFeature(m_quadFeature);
     m_quadFeature = null;
@@ -219,6 +222,13 @@ var webgl_tileLayer = function () {
     var map = m_this.map();
     map.geoOn(geo_event.layerAdd, m_this._clearQuads);
     map.geoOn(geo_event.layerRemove, m_this._clearQuads);
+
+    m_this.geoOn(geo_event.unhidden, () => {
+      m_this.map().scheduleAnimationFrame(() => {
+        m_this._clearQuads();
+        m_this.map().draw();
+      });
+    });
   };
 
   /* These functions don't need to do anything. */