Problem when we zoom the page in safari browser

[tiagomatos8]

🐛 Bug report

Summary of issue

Video is showing the problem: https://www.loom.com/share/e72cbedbb81c4e9dbf3ee1e1d24ae172

Codesandbox container to test: https://codesandbox.io/s/circular-progress-test-27r18?fontsize=14

My machine mac book pro react-circular-progressbar version 2.0.1

What browser version were you using? Safari Version 12.1.1 (14607.2.6.1.1)

[kevinsqi]

@tiagomatos8 thanks for the detailed bug report! The video is 👌, really helpful to identify the issue.

I took a look and the issue is regarding the transform-origin: center center property, which buildStyles({ rotation: ... }) uses under the hood. Namely, that property only has unknown or experimental support in Safari for SVGs.

I tried some different things (this post seems sort of relevant), but couldn't find an immediate workaround. I think transform-origin SVG support is the source of the issue, though. If anyone can figure it out, PRs are welcome!

[emmad5]

Hi, I am having a similar issue where the SVG is not rotating correctly on its axis when zooming in/out on Safari 13.0.5. I noticed it also happens in the demo sandbox in the Rotation example when I zoom in on Safari. https://codesandbox.io/s/vymm4oln6y

Is there any update on this issue @kevinsqi ?

[kevinsqi]

I did a whole bunch of experimentation with transform, transformOrigin (center center, 50px 50px, etc.), and transformBox (fill-box, etc.) properties (on the path and trail element styles), and had no luck finding a solution that works for Safari. transform: rotate on an svg path does not seem to play well in safari in conjunction with zooming in and out. I think the core issue is that even with transformBox set to view-box or fill-box, Safari's notion of the path/trail's bounding box is smaller than that of the svg's bounding box, causing translation issues when zooming.

Here's the sandbox I was trying stuff out on. I'm probably not going to look into it further, but PRs are welcome - if anyone can figure it out that would be awesome.

[nepali-prabhat]

I faced the same issue. Setting transform-origin's value in pixels worked for me. To do that I wrote this function:

  const calculateTransformOrigin = () => {
    const isOSXSafari = isMac && isSafari()
    const currentScale = svgElement.current?.currentScale || 1
    const svgCenter = 300
    const transformOrigin = isOSXSafari ? `${currentScale * svgCenter}px ${currentScale * svgCenter}px` : 'center'
    return transformOrigin
  }

Here, my SVG's viewBox is 600 x 600. I wanted to rotate an element about its center. So, I multiply 300 by currentScale of the SVG and get the origin to rotate for that zoom scale.

For exact implementation, you can check https://github.com/cybersemics/em/pull/1505/commits/385ba6d740bc4c77c1a57cb4794265f897a529f3 and for more background you can take a look at: https://github.com/cybersemics/em/pull/1505#issuecomment-1051611585

Hope this helps!

[bysja]

I also encountered this issue and discovered a simple workaround:

1. Remove the rotation from the CircularProgressBar component styles
2. Add a parent div tag which is rotated instead

Example using TailwindCSS and 50% circle ratio:

<div className="-rotate-90">
  <CircularProgressbar
  circleRatio={0.5}
  ... 
  />
</div>

Using this method, the whole SVG rotates instead of the path child elements. Safari only seems to have a problem with the latter.

Tested on Safari and Chrome on macOS and works correctly for both browsers when zooming in or out.