CSS doesn't always work properly on a mobile device

Question

I created a web application in blazor server, it will be mainly used on mobile devices. I have a problem with the performance of a specific CSS related to displaying the "Bitte warten" animation, when I test it on PC, CSS works fine and looks like this: Correct Display But on mobile device it some times look like this: Not Correct Display (I took a photo of it because device doesn't allow screenshot)

The browser I use to launch the application on a mobile device is Velocity Browser, the device use android 10.

I use chrome browser to launch the application on mobile device and it solved the problem, but I have to stay with Velocity browser. I would be grateful if someone can tell me what could be causing this problem and how to solve it, or if someone could give me advice how to create something similar but using different approach.

Here is the CSS code I am using to display it:

.location{
    text-align:center;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #0093DD;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    animation: pulse 1s linear infinite;
}

.loader:after {
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    border: 5px solid #0093DD;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: scaleUp 1s linear infinite;
}

@keyframes scaleUp {
    0% {
        transform: translate(-50%, -50%) scale(0)
    }

    60%, 100% {
        transform: translate(-50%, -50%) scale(1)
    }
}

@keyframes pulse {
    0%, 60%, 100% {
        transform: scale(1)
    }

    80% {
        transform: scale(1.2)
    }
}

<div class="location">
    <div class="loader"></div>
</div>