Merge pull request #4546 from plotly/fix-webgl-ipad-pro

Fix 3-D config for webgl buffer on iPad Pro & iPad 7th + iOs v13 + Safari

Author: archmoj

package-lock.json

@@ -82,7 +82,7 @@
     "gl-mat4": "^1.2.0",
     "gl-mesh3d": "^2.3.0",
     "gl-plot2d": "^1.4.3",
-    "gl-plot3d": "^2.4.1",
+    "gl-plot3d": "^2.4.2",
     "gl-pointcloud2d": "^1.0.2",
     "gl-scatter3d": "^1.2.2",
     "gl-select-box": "^1.0.3",

package.json

@@ -15,7 +15,6 @@ var createPlot = glPlot3d.createScene;
 
 var getContext = require('webgl-context');
 var passiveSupported = require('has-passive-events');
-var isMobile = require('is-mobile')({ tablet: true });
 
 var Registry = require('../../registry');
 var Lib = require('../../lib');
@@ -31,6 +30,39 @@ var createAxesOptions = require('./layout/convert');
 var createSpikeOptions = require('./layout/spikes');
 var computeTickMarks = require('./layout/tick_marks');
 
+var isMobile = require('is-mobile');
+var tablet = isTablet();
+
+function isTablet() {
+    if(!navigator) return false;
+
+    var ua;
+    // same interface as applied by is-mobile module
+    if(!ua && typeof navigator !== 'undefined') ua = navigator.userAgent;
+    if(ua && ua.headers && typeof ua.headers['user-agent'] === 'string') {
+        ua = ua.headers['user-agent'];
+    }
+    if(typeof ua !== 'string') return false;
+
+    var result = isMobile({
+        ua: ua,
+        tablet: true
+    });
+
+    // handle iPad pro or iPad with iOs 13 using Safari
+    // see https://github.com/plotly/plotly.js/issues/4502
+    if(
+        result === false &&
+        ua.indexOf('Macintosh') !== -1 &&
+        ua.indexOf('Safari') !== -1 &&
+        navigator.maxTouchPoints > 1
+    ) {
+        result = true;
+    }
+
+    return result;
+}
+
 
 var STATIC_CANVAS, STATIC_CONTEXT;
 
@@ -96,7 +128,7 @@ proto.tryCreatePlot = function() {
         canvas: scene.canvas,
         gl: scene.gl,
         glOptions: {
-            preserveDrawingBuffer: isMobile,
+            preserveDrawingBuffer: tablet,
             premultipliedAlpha: true,
             antialias: true
         },