Merge pull request #3972 from plotly/fix-3866

 responsive handler: do not resize if gd is hidden

Author: antoinerg

src/lib/index.js

@@ -1171,3 +1171,8 @@ lib.formatPercent = function(ratio, n) {
     }
     return str;
 };
+
+lib.isHidden = function(gd) {
+    var display = window.getComputedStyle(gd).display;
+    return !display || display === 'none';
+};

src/plot_api/plot_api.js

@@ -182,7 +182,7 @@ function plot(gd, data, layout, config) {
     if(gd._context.responsive) {
         if(!gd._responsiveChartHandler) {
             // Keep a reference to the resize handler to purge it down the road
-            gd._responsiveChartHandler = function() { Plots.resize(gd); };
+            gd._responsiveChartHandler = function() { if(!Lib.isHidden(gd)) Plots.resize(gd); };
 
             // Listen to window resize
             window.addEventListener('resize', gd._responsiveChartHandler);

src/plots/plots.js

@@ -75,20 +75,15 @@ plots.resize = function(gd) {
     gd = Lib.getGraphDiv(gd);
 
     return new Promise(function(resolve, reject) {
-        function isHidden(gd) {
-            var display = window.getComputedStyle(gd).display;
-            return !display || display === 'none';
-        }
-
-        if(!gd || isHidden(gd)) {
+        if(!gd || Lib.isHidden(gd)) {
             reject(new Error('Resize must be passed a displayed plot div element.'));
         }
 
         if(gd._redrawTimer) clearTimeout(gd._redrawTimer);
 
         gd._redrawTimer = setTimeout(function() {
             // return if there is nothing to resize or is hidden
-            if(!gd.layout || (gd.layout.width && gd.layout.height) || isHidden(gd)) {
+            if(!gd.layout || (gd.layout.width && gd.layout.height) || Lib.isHidden(gd)) {
                 resolve(gd);
                 return;
             }

test/jasmine/tests/config_test.js

@@ -771,6 +771,23 @@ describe('config argument', function() {
                 .catch(failTest)
                 .then(done);
             });
+
+            it('should not resize if gd is hidden', function(done) {
+                spyOn(Plotly.Plots, 'resize').and.callThrough();
+
+                fillParent(1, 1);
+                Plotly.plot(gd, data, {}, {responsive: true})
+                .then(function() {
+                    gd.style.display = 'none';
+                    viewport.set(width / 2, height / 2);
+                })
+                .then(delay(RESIZE_DELAY))
+                .then(function() {
+                    expect(Plotly.Plots.resize.calls.count()).toBe(0);
+                })
+                .catch(failTest)
+                .then(done);
+            });
         });
     });