reactjs – Framer Movement animation not working persistently on iOS Safari in React app

I am constructing a counter part in a React software utilizing framer-motion for the animation. The counter increments each second, and the animation works completely on internet browsers like Chrome and Firefox, however generally the counter would not even seem on iOS (iPhone) Safari.

Right here is my code

import { movement, AnimatePresence } from "framer-motion";
import { useEffect, useState } from "react";
import "./Counter.css";

export const Counter = () => {
  const [count, setCount] = useState(0);
  const increment = 0.001;

  useEffect(() => {
    const storedStartTime = localStorage.getItem("startTime");
    if (storedStartTime) {
      const startTime = new Date(storedStartTime).getTime();
      const currentTime = Date.now();
      const elapsedSeconds = (currentTime - startTime) / 1000;

      setCount(elapsedSeconds * increment);
    }
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prevCoins) => prevCoins + increment);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  const digitVariants = {
    enter: {
      y: "100%",
      scale: 0.8,
      opacity: 0,
      transition: { period: 0.2, ease: "easeInOut" },
    },
    middle: {
      y: "0%",
      scale: 1,
      opacity: 1,
      transition: { period: 0.2, ease: "easeInOut" },
    },
    exit: {
      y: "-100%",
      scale: 0.8,
      opacity: 0,
      transition: { period: 0.2, ease: "easeInOut" },
    },
  };

  const getDigits = (worth: quantity) => worth.toFixed(3).break up("");
  const digits = getDigits(depend);
  const prevDigits = getDigits(depend - increment);

  return (
    

      {digits.map((digit, index) => {
        const prevDigit = prevDigits[index];
        const shouldAnimate = digit !== prevDigit;

        return (
          

            
              {shouldAnimate && (
                
                  {prevDigit}
                
              )}
              
                {digit}
              
            
          
        );
      })}
    
  );
};


CSS
.counter-container {
  show: flex;
  peak: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  align-items: flex-start;
}

.counter {
  place: relative;
  peak: 16px;
  width: 10px;
  show: flex;
  align-items: middle;
  justify-content: middle;
  overflow: hidden;
}

.timer-digit {
  place: absolute;
  width: 100%;
  show: flex;
  align-items: middle;
  justify-content: middle;
}

.counter-container,
.counter,
.timer-digit {
  remodel: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: remodel, opacity;
}

I believe it may be associated to the setInterval updates or how framer-motion animations are dealt with in Safari on iOS, however I am unsure. I’ve checked that animations are utilized as anticipated on desktop browsers, however they generally do not render in any respect on iPhone.

What can be one of the simplest ways to repair this so the animation works reliably on iOS units?