apexcharts.js
apexcharts.js copied to clipboard
apexcharts
Safari: legend position will offset when zoom in
Description
Safari browser will offset legends when zoom in
Steps to Reproduce
- Open Safari browser
- Open any demo charts with legends
- 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/
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.
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.
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
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.
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.
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
@busyxiang / @brianlagunas Can you please reopen this thread as I can see the issue getting reproducing in Version 3.41.0 ? Thank you!
@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?
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
Same error goes for zoom out in safari. Legend comes out of the div when zoom out.
