Анимация выглядит сломанной в браузерах на основе Webkit ⇐ CSS

[Anonymous]

У меня есть эта анимация, которая отлично работает в таких браузерах, как Chrome, но как только я пробую ее в Safari, она выглядит сломанной и не делает того, что должна.

Код: Выделить всё

.progressIndicator {
stroke: var(--primary_color);
}

.progressIndicator svg {
animation: crotate 1.5s linear infinite;
-webkit-animation: crotate 1.5s linear infinite;
height: 100%;
width: 100%;
}

.progressIndicator circle {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
animation: cdash 1.5s ease-in-out infinite 0s;
-webkit-animation: cdash 1.5s ease-in-out infinite 0s;
stroke-linecap: round;
fill: none;
stroke-width: 7.5px;
}

@keyframes crotate {
100% {
transform: rotate(360deg);
}
}

@-webkit-keyframes crotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@keyframes cdash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}

@-webkit-keyframes cdash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}

Код: Выделить всё

Если у вас есть дополнительные вопросы, дайте мне знать. Я сделал все, что мог, чтобы сделать эту анимацию максимально совместимой с Webkit, но пока безуспешно.

Подробнее здесь: https://stackoverflow.com/questions/784 ... d-browsers