Merge pull request #6605 from lvlte/heatmap_safari_fix

Fix heatmap/image traces without zsmooth on Safari/iOS

Author: archmoj

draftlogs/6605_fix.md

@@ -0,0 +1 @@
+ - Fix heatmap rendering on Safari when `zsmooth` is set to false [[#6605](https://github.com/plotly/plotly.js/pull/6605)], with thanks to @lvlte for the contribution!

src/lib/supports_pixelated_image.js

@@ -15,27 +15,39 @@ function supportsPixelatedImage() {
     if(_supportsPixelated !== null) { // only run the feature detection once
         return _supportsPixelated;
     }
-    if(Lib.isIE()) {
-        _supportsPixelated = false;
-    } else {
+
+    _supportsPixelated = false;
+
+    // @see https://github.com/plotly/plotly.js/issues/6604
+    var unsupportedBrowser = Lib.isIE() || Lib.isSafari() || Lib.isIOS();
+
+    if(window.navigator.userAgent && !unsupportedBrowser) {
         var declarations = Array.from(constants.CSS_DECLARATIONS).reverse();
-        var supports = window.CSS && window.CSS.supports || window.supportsCSS;
+
+        var supports = (window.CSS && window.CSS.supports) || window.supportsCSS;
         if(typeof supports === 'function') {
             _supportsPixelated = declarations.some(function(d) {
                 return supports.apply(null, d);
             });
         } else {
-            var image3 = Drawing.tester.append('image');
+            var image3 = Drawing.tester.append('image')
+                .attr('style', constants.STYLE);
+
             var cStyles = window.getComputedStyle(image3.node());
-            image3.attr('style', constants.STYLE);
+            var imageRendering = cStyles.imageRendering;
+
             _supportsPixelated = declarations.some(function(d) {
                 var value = d[1];
-                return cStyles.imageRendering === value ||
-                       cStyles.imageRendering === value.toLowerCase();
+                return (
+                    imageRendering === value ||
+                    imageRendering === value.toLowerCase()
+                );
             });
+
             image3.remove();
         }
     }
+
     return _supportsPixelated;
 }