search

plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
16.91k stars 1.85k forks source link

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

Open questionlp opened 1 year ago

questionlp commented 1 year ago

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 commented 1 year ago

@lvlte are you interested to open another PR? If so please consider my comment here: https://github.com/plotly/plotly.js/pull/6605#issuecomment-1548491365

lvlte commented 1 year ago

Yes I'm looking into it.

lvlte commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 11 months ago

Any progress on this bug?