The svg text animation looks different in some mobile devices

Question

I tried to add a svg animation text to my webpage and hosted it to a github webpage.But when i open it in some mobile devices the text animation looks different. Here is what is expected Expected Text Animation But in some mobile phones it looks like this enter image description here It only occurs in some mobile devices.

Here is the html and css of the text html

   <svg viewBox="0 0 1650 400">
            <text x="50%" y="70%" fill="transparent" text-anchor="middle">
                TECHNE
            </text>
     </svg>

css

    svg text{
        font-size: 7rem;
        stroke: #0ed1c1;
        font-size: 9rem;
        font-weight: 700;
        stroke-width: 5;
        animation: textAnimate 5s infinite;
    }

    @keyframes textAnimate{
        0%{
            stroke-dasharray: 0 50%;
        }
        100%{
            stroke-dasharray: 50% 0;

        }
    }