IOS safari transform: scale animations offset element position with translateX,Y?

Question

css

It's about the circles around the phone
They have such styles

.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;
}

And this animation:

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

In chrome, when viewing when resizing the window, everything is ok. But on the iPhone, safari, judging by everything, translate does not apply. What could be the reason and how to fix it?
p.s the size of the circles is built using 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`;
            }


        }

Here is the code if needed