diff --git a/draftlogs/6605_fix.md b/draftlogs/6605_fix.md new file mode 100644 index 00000000000..71c5a511409 --- /dev/null +++ b/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! diff --git a/src/lib/supports_pixelated_image.js b/src/lib/supports_pixelated_image.js index 0b5d2e258ee..8abfe53940b 100644 --- a/src/lib/supports_pixelated_image.js +++ b/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; }