IOS safari анимации transform: scale смещают позицию элемента с translateX,Y?

Question

[godsplane]

Речь про круги вокруг телефона
У них такие стили

.line {
                    transform-origin: center;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    border: 1px solid red;
                    border-radius: 50%;
                    display: block;
                    z-index: -1;
                    border: 3px solid #2eaca5;
                    transform: translateY(-50%) translateX(-50%);
                    animation: 1s linear infinite alternate circle;
}

И такая анимация:

@keyframes circle {
    0% {
  
        transform:translateY(-50%) translateX(-50%)  scale(1) ;
    }
  
    100% {
    
        transform:translateY(-50%) translateX(-50%)  scale(1.1) ;
    }
}

В хроме при просмотре при ресайзе окна все ок. Но на айфоне, сафари судя по все translate не применяется. В чем может быть причина и как исправить?
p.sразмер кругов строится через js

let circle = document.querySelectorAll('.line')
        function renderCircle(width, height) {
            width = Math.round(phoneImg.getBoundingClientRect().width)
            height = Math.round(phoneImg.getBoundingClientRect().height)
            let c = 0;
            let arrOfSize = [
                1.1,
                1.4,
                .9
            ]
            for (let elem of circle) {
                c++;
                console.log(c)
                elem.style.width = `${height / arrOfSize[c - 1]}px`;
                elem.style.height = `${height / arrOfSize[c - 1]}px`;
            }


        }

Вотт код если нужен