Group-income-simple: SVG Circle bars are misaligned in zoomed out Safari

[hubudibu]

Problem

On the dashboard's proposal section, circular progress bars are misaligned when using the page from Safari and changing the viewport zoom level ( ⌘- ) to 50%.

Solution

The issue is caused by Safari miscalculating transforms and transform-origin when zoomed. I did not succeed in fixing this safari bug with a workaround, different kinds of positioning and setting transform-box to various values did not help.
The solution would be to avoid using transforms in svgs altogether, by eg. using a path instead of a stroke for the progress bar. (the transform was needed because the stroke originally always starts from 🕒 and rotating the circle was the only way to make it start from 🕛)

[sandrina-p]

Thanks for the first analysis @hubudibu ! With that I was able to fix the bug. In this case, applying transform on the parent, solved it ;) See commit here: https://github.com/okTurtles/group-income-simple/pull/415/commits/7670092f80ad7206338592a25f3eaf890ddcbc5c

[hubudibu]

👍 that commit fixed the issue for everything above 50% zoom level, so it's a big improvement!
I suggest leaving this issue open for fixing zoom levels 50% and below. I edited the issue text to reflect this.

my first suggestion was to combine @sandrina-p 's solution with relative circle sizes:

      cx: 50%;
      cy: 50%;
      r: calc(50% - 1px);

instead of attributes, but this resulted in the actual bar ( strokeDasharray ) being shorter with every zoom level :/

[taoeffect]

Don't know if this is at all helpful, but it might be useful, and maybe there are similar libraries out there that have dealt with this problem successfully: https://webkul.github.io/vivid/

[mmbotelho]

Since this element does not exist anymore in the UI, can we close it?

[taoeffect]

Yep!