dataURI method doesn't properly size/scale the legend on Safari for Mac

[andrussuitsu]

When using optional parameters of dataURI method to size or scale the returned image, the legend is not sized or scaled properly.

Steps to Reproduce

Please have a look at codepen https://codepen.io/andrussuitsu/pen/JjZoRjB. It will open a new tab with the data:image uri returned by the dataURI method that was called with scale: 2 parameter.

Expected Behavior

The legend will scale/size together with the rest of the chart.

Actual Behavior

The legend is not scaled/sized properly.

Screenshots

Reproduction Link

https://codepen.io/andrussuitsu/pen/JjZoRjB

[andrussuitsu]

Forgot to mention that I am using version 3.35.5 of apexcharts.

[brianlagunas]

Your code pen does not duplicate the issue. The legend is properly located under the chart

Is there missing information to duplicate this issue?

[andrussuitsu]

This is an error with Safari only, it works ok on other browsers.

[brianlagunas]

It works on my Safari. Can anyone else duplicate this?

[andrussuitsu]

I can duplicate it also on my mobile Safari on iOS 16.1

[andrussuitsu]

[brianlagunas]

I'm also running Safari on iOS 16. Without the ability to duplicate it, it will be very difficult to find the issue or fix it.

[andrussuitsu]

I am using Safari Version 16.1 (18614.2.9.1.12) on my desktop. The issue was actually discovered by our team tester. I will ask him if he uses the same Safari version or perhaps it is an older version.

[andrussuitsu]

DuckDuckGo Version 0.30.1 (0.30.1) also reproduces the issue.

[andrussuitsu]

I found a better way to show the issue, without the need to enable the popups that Safari is good at blocking. https://codepen.io/andrussuitsu/pen/jOKEwMN While doing that I discovered that bigger widths than original (scale > 1) result in incorrect sizing and placement of legend while smaller widths than original (scale < 1) result in legend missing altogether. And again - this seems to happen only on Safari and DuckDuckGo, which seems to use the same engine as Safari.

[andrussuitsu]

Our team tester, who discovered this issue, has Safari 15.6.1 (17613.3.9.1.16)

[andrussuitsu]

Using Safari 17.3.1 on Mac Studio M2 still shows the same problem on https://codepen.io/andrussuitsu/pen/jOKEwMN. It is not only on my computer, our testers once again reported this today.

https://codepen.io/andrussuitsu/pen/jOKEwMN

[andrussuitsu]

Our testers have discovered that the problem with the legend placement can also be seen when just changing Safari's zoom level. In fact, you can see it even on your documentation page: https://apexcharts.com/javascript-chart-demos/line-charts/dashed/

Just increase the zoom level and you will see that the chart area will change properly but the legend will stay where it is using the initial size.

[littlefrontender]

it should help https://github.com/apexcharts/apexcharts.js/issues/2963#issuecomment-1127882323