From 5840137dfd1be46d96c127d021811504bb3fd0de Mon Sep 17 00:00:00 2001 From: Eric Lavault <39483232+lvlte@users.noreply.github.com> Date: Sun, 14 May 2023 20:37:59 +0200 Subject: [PATCH 1/5] Fix heatmap/image traces without zsmooth on Safari --- src/lib/supports_pixelated_image.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/supports_pixelated_image.js b/src/lib/supports_pixelated_image.js index 0b5d2e258ee..382c3879615 100644 --- a/src/lib/supports_pixelated_image.js +++ b/src/lib/supports_pixelated_image.js @@ -15,7 +15,8 @@ function supportsPixelatedImage() { if(_supportsPixelated !== null) { // only run the feature detection once return _supportsPixelated; } - if(Lib.isIE()) { + if(Lib.isIE() || Lib.isSafari()) { + // NB. Safari passes the test below but the final rendering is not pixelated _supportsPixelated = false; } else { var declarations = Array.from(constants.CSS_DECLARATIONS).reverse(); From 9467b44d0143aa9fe39dee8100e99f728ee20171 Mon Sep 17 00:00:00 2001 From: Eric Lavault <39483232+lvlte@users.noreply.github.com> Date: Sun, 14 May 2023 20:52:23 +0200 Subject: [PATCH 2/5] Add draft log --- draftlogs/6605_fix.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 draftlogs/6605_fix.md 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! From 1bb2b82e21c3858c333f0f33144c6be48f4d899f Mon Sep 17 00:00:00 2001 From: Eric Lavault <39483232+lvlte@users.noreply.github.com> Date: Mon, 15 May 2023 18:58:16 +0200 Subject: [PATCH 3/5] Fix heatmap/image traces without zsmooth on IOS Co-authored-by: Alex Johnson --- src/lib/supports_pixelated_image.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/supports_pixelated_image.js b/src/lib/supports_pixelated_image.js index 382c3879615..913c0e1c167 100644 --- a/src/lib/supports_pixelated_image.js +++ b/src/lib/supports_pixelated_image.js @@ -15,7 +15,7 @@ function supportsPixelatedImage() { if(_supportsPixelated !== null) { // only run the feature detection once return _supportsPixelated; } - if(Lib.isIE() || Lib.isSafari()) { + if(Lib.isIE() || Lib.isSafari() || lib.isIOS()) { // NB. Safari passes the test below but the final rendering is not pixelated _supportsPixelated = false; } else { From 80503a569503ec3005f43db99d258855e8b669d3 Mon Sep 17 00:00:00 2001 From: Eric Lavault <39483232+lvlte@users.noreply.github.com> Date: Mon, 15 May 2023 19:47:00 +0200 Subject: [PATCH 4/5] Fix heatmap/image traces without zsmooth on IOS Co-authored-by: Mojtaba Samimi <33888540+archmoj@users.noreply.github.com> --- src/lib/supports_pixelated_image.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/supports_pixelated_image.js b/src/lib/supports_pixelated_image.js index 913c0e1c167..8e7c7d220b6 100644 --- a/src/lib/supports_pixelated_image.js +++ b/src/lib/supports_pixelated_image.js @@ -15,7 +15,7 @@ function supportsPixelatedImage() { if(_supportsPixelated !== null) { // only run the feature detection once return _supportsPixelated; } - if(Lib.isIE() || Lib.isSafari() || lib.isIOS()) { + if(Lib.isIE() || Lib.isSafari() || Lib.isIOS()) { // NB. Safari passes the test below but the final rendering is not pixelated _supportsPixelated = false; } else { From 67e611dc1049a2756f5c9005115e956d6297589b Mon Sep 17 00:00:00 2001 From: Eric Lavault <39483232+lvlte@users.noreply.github.com> Date: Mon, 15 May 2023 21:37:10 +0200 Subject: [PATCH 5/5] fix zsmooth false rendering : check useragent, improve readabiity --- src/lib/supports_pixelated_image.js | 29 ++++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/src/lib/supports_pixelated_image.js b/src/lib/supports_pixelated_image.js index 8e7c7d220b6..8abfe53940b 100644 --- a/src/lib/supports_pixelated_image.js +++ b/src/lib/supports_pixelated_image.js @@ -15,28 +15,39 @@ function supportsPixelatedImage() { if(_supportsPixelated !== null) { // only run the feature detection once return _supportsPixelated; } - if(Lib.isIE() || Lib.isSafari() || Lib.isIOS()) { - // NB. Safari passes the test below but the final rendering is not pixelated - _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; }