Transform, transition and blur are delayed in Instagram in-app browser (animation)

I am trying to make a wheel of fortune website in React with JavaScript, but I'm having an issue displaying the animations inside of Instagram's iOS in-app browser. It works everywhere else - on iOS and Android devices in Chrome and Safari - and also in Facebook's in-app browser. But on Instagrams in-app browser animations are delayed around 3 seconds (when I post a link in a story or have a link in the bio).

I have checked that Instagram is using webkit, so this is the one to target. I tried all the suggestions I could find online. Adding:

-webkit-transform: translate3d(0,0,0),
-webkit-transform: translateX(-100%);,
-webkit-backface-visibility: hidden,
-webkit-perspective: 1000;

backface and perspective did fix a glitch error in Facebook's in-app browser - but not on Instagram. I also tried using "will-change".

The only thing that I got to work was to add:

wheel.style.webkitTransitionDelay = "-3.2s"

So it can start right away - if I cut off the beginning of the animation. But this also cuts off the ease-in - and it also removes the smooth ease-out. I looked into the Webview 300 ms delay - but I don't think this is the issue. The click on the button is detected straight away - and I use audio of a spinning wheel, which starts instantly. It is only an issue with animations.

It's also not only in regard to transform and transition - I also apply a blur with keyframes, and this blur is delayed the same amount. This means that both blur and transitions are only actually displayed for 6 seconds - because the first 3 seconds are not being shown.

Does anybody have any ideas on how to fix this? I could live with using the delay if I could keep the ease in and out.

.blur {
  animation: blur 9s;
}

@keyframes blur {
  0% {
    filter: blur(0px);
  }
  15% {
    filter: blur(1.5px);
  }
  80% {
    filter: blur(1.5px);
  }
  100% {
    filter: blur(0px);
  }
}

  function start() {
    const startButton = document.querySelector(".button");
    const wheel = document.querySelector(".wheel");
    const audio = document.getElementById("sound");
    audio.play();
    startButton.classList.add("disabled");
    startButton.style.pointerEvents = "none";

    deg = Math.floor(5000 + Math.random() * 5000);
   
    wheel.style.transition = "all 9s ease-in-out";
    wheel.style.webkitTransition = "all 9s ease-in-out";

    wheel.style.transform = `rotate(${deg}deg)`;
    wheel.style.webkitTransform = `rotate(${deg}deg)`;

    // Apply the blur
    wheel.classList.add("blur");

    wheel.addEventListener("transitionend", doSomething);
    wheel.addEventListener("webkitTransitionEnd", doSomething);
  }



  return (
    <>
      <audio id="sound" src="/wheel.mp3" preload="auto">
        Your browser does not support the <code>audio</code> element.
      </audio>
      <div id="outer">
        <div id="app">
          <img className="foot" style={{ pointerEvents: "none" }} src="foot.png" />
          <img className="wheel" style={{ pointerEvents: "none" }} src="wheel.png" />
          <img className="marker" style={{ pointerEvents: "none" }} src="marker.png" />
          <img
            onClick={() => start()}
            className="button"
            src="button.png"
          />
        </div>
        <div id="web-cam">
          <video ref={videoRef} playsInline id="video" muted>
            <source src={currentVideo} id="source" type="video/mp4" />
          </video>
          <div className="shadow"></div>
        </div>
      </div>
    </>
  );
}