Text Animation Smooth in Chrome but Stuck and Not Smooth in Safari and iOS Devices

I’m working on a website with a text animation that looks smooth and performs well in Chrome. However, the same animation appears stuck and not smooth in Safari and on iOS devices.

Here’s a brief overview of the setup:

The animation is applied to a h1 element using CSS keyframes.
I’m using -webkit-animation for Safari and iOS support.
The animation involves transforming and opacity changes.
CSS Code:

.hero-scroll {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 6rem;
  font-weight: bold;
  transition: transform 0.7s ease, font-size 0.7s ease, top 0.7s ease, color 0.7s ease;
  z-index: 2;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-stroke: 0.5px transparent;
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1);
}

@-webkit-keyframes keyarm {
  0% { -webkit-transform: rotate(0deg); }
  5% { -webkit-transform: rotate(-14deg); }
  10% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(0deg); }
}

@keyframes keyarm {
  0% { transform: rotate(0deg); }
  5% { transform: rotate(-14deg); }
  10% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

.sticky {
  position: fixed;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: #000;
  z-index: 1001;
  transition: top 0.7s ease, font-size 0.7s ease, color 0.7s ease;
  user-select: none;
  -webkit-animation: keyarm 1.5s ease-in-out infinite;
  animation: keyarm 1.5s ease-in-out infinite;
}

React Component Code:

import React, { forwardRef } from 'react';

const HeroSection = forwardRef((props, ref) => {
    return (
        <div className="hero-section">
            <div className="hero-image-left">
                <h1 className="hero-scroll" ref={ref}>ATNATIC</h1>
                <div className="video-container">
                    <video 
                        src="/Static/Models/Refercopy.mp4" 
                        autoPlay 
                        loop 
                        muted
                        playsInline
                        className="hero-video"
                    />
                </div>
            </div>
        </div>
    );
});

export default HeroSection;

App.js

    const handleScroll = () => {
        const header = headerRef.current;
        const heroText = heroTextRef.current;
        const threshold = header ? header.offsetHeight : 0;
    
        if (header) {
            if (window.scrollY > threshold) {
                header.classList.add('visible');
                header.classList.remove('pre-scroll');
            } else {
                header.classList.remove('visible');
                header.classList.add('pre-scroll');
            }
        }
    
        if (heroText) {
            if (window.scrollY >= threshold) {
                heroText.classList.add('sticky');
            } else {
                heroText.classList.remove('sticky');
            }
        }
    };

Problem:
The animation works well in Chrome but is not smooth in Safari and iOS devices. It appears stuck or choppy.

What I’ve Tried:

Added -webkit- prefixes for better support in Safari.
Ensured the will-change property is set.
Verified the issue persists on different devices.

Any suggestions on how to make the animation smoother across all browsers, especially Safari and iOS devices?