Safari: legend position will offset when zoom in

[busyxiang]

Description

Safari browser will offset legends when zoom in

Steps to Reproduce

1. Open Safari browser
2. Open any demo charts with legends
3. Zoom in

Expected Behavior

The legends' position should not offset when zoom in

Actual Behavior

The legends' position offset when zoom in

Screenshots

Reproduction Link

https://apexcharts.com/javascript-chart-demos/column-charts/basic/

[ryanklenk]

@busyxiang Were you able to find a workaround or fix for this at all?

[busyxiang]

@ryanklenk nope, still waiting for the dev team to fix this

[idpaterson]

I do not know how to account for the discrepancy between where Safari thinks the legend elements are located and where they are rendered. In this example, Safari is indicating the bounding box of the black circle on the first legend item.

We are currently testing .apexcharts-svg .apexcharts-legend { position: fixed !important; } as a quick and dirty workaround. The legend does not scale to width so it is not centered at different zoom levels, but it is at least at the correct position vertically.

[oootkarsh]

Any progress on this? This is an annoying bug plaguing lots of apex charts users. Possibly moving out the legend from SVG or using idpaterson's workaround.

[idpaterson]

I'm not seeing this glitch anymore. The CSS workaround is still in place in my implementation but it no longer has any effect because the legend has been moved outside of the SVG. Currently using apexcharts 3.37.2, perhaps it was fixed by 088ed12 which was included in 3.37.1

[idpaterson]

Indeed, looks like 3.37.1 fixed it. Check out this codepen with Safari in 3.36.1 where the legend bug still existed on page zoom in/out vs 3.37.2 which seems to be fixed.

[brianlagunas]

Due to the feedback from the community, this appears to have been fixed and is no longer an issue. I will be closing it as fixed.

[VaibhavTessell]

I can see the issue fixed in Version 3.37.2, but seems like some regression happened between 3.37.2 to 3.41.0 as I can see it started happening again.

Can somebody please look into it?

cc: @brianlagunas

[VaibhavTessell]

@busyxiang / @brianlagunas Can you please reopen this thread as I can see the issue getting reproducing in Version 3.41.0 ? Thank you!

[brianlagunas]

@busyxiang / @brianlagunas Can you please reopen this thread as I can see the issue getting reproducing in Version 3.41.0 ? Thank you!

Do you have a codepen proving this?

[VaibhavTessell]

Do you have a codepen proving this?

Link to the codepen with 3.41.0 version: https://codepen.io/Vaibhav-Singh-the-bold/pen/BaGJmjx

cc: @brianlagunas

[mervekaraman]

Same error goes for zoom out in safari. Legend comes out of the div when zoom out.

[DmitryKhiliuk]

Is there any way to solve this problem?

[NikitaM8]

Hello!
Still now solution? Using 3.53 version, legends are still not scale properly in Safari while zoom in/out :(

[junedchhipa]

Can someone mention the Safari version on which the bug can be reproduced? I am having a hard time reproducing it.

[NikitaM8]

Sure.
Facing with this issue on Safari Version 17.2.1 (19617.1.17.11.12)

[toddsiegel]

I am experiencing this as well with apexcharts 3.54.1, and Sarari Version 17.6 (19618.3.11.11.5)