replot when webgl buffer dims don't match canvas dims

- this can happen when relayouting to large width/height
  on some browsers (e.g. Chrome 68)

Author: etpinard

src/plot_api/plot_api.js

@@ -242,6 +242,24 @@ exports.plot = function(gd, data, layout, config) {
             fullLayout._glcanvas
                 .attr('width', fullLayout.width)
                 .attr('height', fullLayout.height);
+
+
+            var regl = fullLayout._glcanvas.data()[0].regl;
+            if(regl) {
+                if(
+                    fullLayout.width !== regl._gl.drawingBufferWidth ||
+                    fullLayout.height !== regl._gl.drawingBufferHeight
+                 ) {
+                    // Unfortunately, this can happen when relayouting to large
+                    // width/height on some browsers.
+                    Lib.log([
+                        'WebGL context buffer and canvas dimensions do not match,',
+                        'due to browser/WebGL bug.',
+                        'Clearing graph and plotting again.'
+                    ].join(' '));
+                    exports.newPlot(gd, gd.data, gd.layout);
+                }
+            }
         }
 
         return Plots.previousPromises(gd);

test/jasmine/tests/splom_test.js

@@ -1,6 +1,7 @@
 var Plotly = require('@lib');
 var Lib = require('@src/lib');
 var Plots = require('@src/plots/plots');
+var plotApi = require('@src/plot_api/plot_api');
 var SUBPLOT_PATTERN = require('@src/plots/cartesian/constants').SUBPLOT_PATTERN;
 
 var d3 = require('d3');
@@ -682,6 +683,39 @@ describe('Test splom interactions:', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('@gl should clear graph and replot when canvas and WebGL context dimensions do not match', function(done) {
+        var fig = Lib.extendDeep({}, require('@mocks/splom_iris.json'));
+
+        function assertDims(msg, w, h) {
+            var canvas = gd._fullLayout._glcanvas;
+            expect(canvas.node().width).toBe(w, msg);
+            expect(canvas.node().height).toBe(h, msg);
+
+            var gl = canvas.data()[0].regl._gl;
+            expect(gl.drawingBufferWidth).toBe(w, msg);
+            expect(gl.drawingBufferHeight).toBe(h, msg);
+        }
+
+        spyOn(plotApi, 'newPlot').and.callThrough();
+        spyOn(Lib, 'log');
+
+        Plotly.plot(gd, fig).then(function() {
+            expect(plotApi.newPlot).toHaveBeenCalledTimes(0);
+            expect(Lib.log).toHaveBeenCalledTimes(0);
+            assertDims('base', 600, 500);
+
+            return Plotly.relayout(gd, {width: 4810, height: 3656});
+        })
+        .then(function() {
+            expect(plotApi.newPlot).toHaveBeenCalledTimes(1);
+            expect(Lib.log)
+                .toHaveBeenCalledWith('WebGL context buffer and canvas dimensions do not match, due to browser/WebGL bug. Clearing graph and plotting again.');
+            assertDims('base', 4810, 3656);
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });
 
 describe('Test splom hover:', function() {