2.23.0: Setting zsmooth to false for heatmaps seems to be ignored or isn't working in zsmooth on some OS+Browsers e.g. Safari and iPad/iPhone Chrome

[questionlp]

With version 2.23.0, it seems like the data[type=heatmap] zsmooth property to false does not seem to have any effect in Safari (tested in 16.4.1 on macOS Monterey and macOS Ventura, also Safari for iOS 16.4).

No matter what the value is set to, Safari renders the heatmap as a big blurry mess; while, it is nice and crisp rendered in Firefox and Chrome.

Codepen Example: https://codepen.io/theqlp/pen/Poyayop

The issue seems to be a regression from 2.22.0 and can be replicated by changing the script tag in the codepen from:

<script src="https://cdn.plot.ly/plotly-2.23.0.min.js"></script>

to:

<script src="https://cdn.plot.ly/plotly-2.22.0.min.js"></script>

I have posted screenshots showing the behavior of 2.20.0 and 2.23.0 in macOS Safari, 2.23.0 in Firefox and Chrome, and 2.23.0 in Safari for iOS: https://imgur.com/a/m75ozkP

[alexcjohnson]

Thanks @questionlp - must be from #6574, cc @lvlte @archmoj

[lvlte]

@alexcjohnson yeah.. :/ my bad, I should have precisely warned that I couldn't check how the final image actually looks on Safari (don't own a mac).

[questionlp]

Something that I noticed while checking out 2.23.0 and with older versions of Plotly.js is that saving the image of a heatmap using the built-in download plot as a PNG file does not include the heatmap image in Safari. Checking back with previous versions, including 2.20.0, the behavior exists there as well. It's included in the PNG download in Firefox and Chrome.

Seems like Safari is doing something really funky for some time.

Screenshot: https://imgur.com/a/c4iCy9n
Live example (v2.20.0): https://graphs.wwdt.me/shows/monthly-aggregate-score-heatmap

[archmoj]

It's not only Safari but I also see this happening on iPad and iPhone running Chrome!

[questionlp]

@archmoj I think it'll be the same with Firefox and other iOS/iPadOS browsers that are still using WebKit for rendering per limitations set by Apple. Eventually, we're supposed to see other web rendering engines made available so that Chrome and Firefox can use their own native renderers; but, I don't know what the timeframe of that is.

[lvlte]

@questionlp yes it seems the webkit rendering engine is the constant for those impacted browsers.

From what I just saw on Safari/Monterey, the behavior is the same as with IE's -ms-interpolation-mode, it works only with <img>, not svg <image>.

[lvlte]

Something that I noticed while checking out 2.23.0 and with older versions of Plotly.js is that saving the image of a heatmap using the built-in download plot as a PNG file does not include the heatmap image in Safari. Checking back with previous versions, including 2.20.0, the behavior exists there as well. It's included in the PNG download in Firefox and Chrome.

It sounds like another bug right ? I mean it deserves a separate issue.

[questionlp]

@lvlte Yeah, I was going to search to see if it was reported.