animation dosen't work svg in Safari innerWidth

Question

Window.innerWidth is fine if it's more than a certain size, but if it's less than a certain size, the animation won't work properly. The starting point shifts to the left react code

        <svg className="moving-circle" style={{ animation:state.TimerInfo.State===false?"":`ani ${state.invasionTimer}s linear` }} width="220" height="220" viewBox="0 0 168 168">
          <path
            d="M163 84C163 127.63 127.63 163 84 163C40.3695 163 5 127.63 5 84C5 40.3695 40.3695 5 84 5C127.63 5 163 40.3695 163 84Z"
            stroke="green"
            strokeWidth="12"
          />
          <text x="49%" y="-47%" textAnchor="middle" dominantBaseline="middle" className="Timercount">
            {Math.ceil(state.TimerInfo.Time)}
          </text>
        </svg>

`css code'

.moving-circle {
  position: absolute;
  top: 22.5%;
  left: 22.5%;
  stroke-dasharray: 500px;
  stroke-dashoffset: 500px;
  transform: rotate(-90deg);
  fill: rgba(0, 0, 0, 0.555);  
}
@keyframes ani {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 500px;
  }
}

I'd appreciate it if you could tell me what I need to change.

Normal stranger