Heatmap PNG Download Missing Plot on macOS/iOS/iPadOS Safari and other iOS/iPadOS WebKit-based browsers

[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.

Since it seems to be an issue with WebKit, it would be a decent assumption that the issue would also appear on other iOS and iPadOS browsers that use WebKit as a rendering engine.

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

[archmoj]

@lvlte are you interested to open another PR?
If so please consider my comment here: #6605 (comment)

[lvlte]

Yes I'm looking into it.

[lvlte]

This is driving me nuts, I'm on a Monterey VM with Safari 15.1 and I got random results.. Surprisingly I obtain an empty plot very rarely, and when it happens if I re-try then it works the second time. I don't know what can cause this but changing the version from 2.20 to 2.23 doesn't seem to make a difference.

@questionlp did you experienced such random results ? ie. if you retry several times to download the same plot ? also after resizing the browser window ?

[questionlp]

I'm on macOS Ventura with Safari 16.4 and it seems to not include the plot on the first download of the chart, but it seems to work on successive attempts. Refreshing the page and downloading the PNG will include the plot. I have set a fixed height/width on the chart download image; but, not a fixed size on the chart itself.

Closing and opening a new window and downloading the PNG sometimes leads to a missing plot; but, the plot is included in subsequent downloads.

It's definitely repeatable when opening a new private window, loading the page and saving the chart on the first attempt (missing plot). Reloading a private window or subsequent downloads includes the plot in the PNG.

[lvlte]

It's definitely repeatable when opening a new private window

Yes I confirm the first download attempt in a new private window leads to an "empty plot" every time, and the second attempt is working fine.

In fact it appears that the bug concerns all plots having one or more svg <image>, those images will be missing from the plot but not necessarily the other elements, if any (like scatter points, lines, bars, etc.). So it's not just heatmap traces but also image traces, and more surprisingly layout images as well.

@archmoj I don't think it is a regression, the bug occurs on all versions from 2.23.0 back to 2.17.0, and I just tested version 2.0.0, it's there, seems like it's been hiding for a long time.

[ziqbal]

Yes, using plotly.js v2.24.2 on mobile iOS, when clicking download icon, the plots are missing but the grid is rendered.

I've noticed this for the last year on an iphone 7 running iOS 15.7.8 - I don't know what version of safari that is.

Last week, testing on the latest iphone 14 running iOS 16.5.1 it still happens.

Thank you for the tip of downloading twice - that works!

[michalbie]

Any progress on this bug?

[AltefrohneGaelle]

I'm on Mac Sonoma 14.6.1 with Safari 17.6 and the issue is still there. Any progress on this bug ?
And when I download, even if it's the first attempt, the image I can see in Network of Safari is ok but not the real picture downloaded.

FYI, I don't know if it's related but sometimes I received this error only on Safari: undefined is not an object (evaluating 'gd._fullLayout._hoversubplot = null').