变换，过渡和模糊在Instagram Instagram In-App浏览器（动画）中被延迟

Question

我正在尝试在与JavaScript的React中建立一个财富网站，但是我在Instagram的iOS内应用程序内浏览器中显示动画时遇到了一个问题。它在其他地方工作 - 在Chrome和Safari的iOS和Android设备上 - 以及Facebook的应用程序内浏览器。但是在Instagram上，应用程序内浏览器动画大约延迟了3秒钟（当我在故事中发布链接或在Bio中具有链接时）。

我已经检查了Instagram正在使用WebKit，因此这是目标。我尝试了所有可以在网上找到的建议。添加：

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

后面和透视图确实在Facebook的应用程序内浏览器中解决了故障错误 - 但在Instagram上没有解决。我还尝试使用“ Will-Change”。

我唯一要工作的是添加：

wheel.style.webkitTransitionDelay = "-3.2s"

如果我切断动画的开始，它可以立即开始。但这也切断了便利性 - 并且还可以消除平稳的易感性。我研究了300毫秒延迟的WebView-但我认为这不是问题。立即检测到单击按钮 - 我使用旋转轮的音频，该音频立即开始。这只是动画的问题。

这不仅在变换​​和过渡方面 - 我还对密钥帧应用了模糊，而且这种模糊延迟了相同的数量。这意味着模糊和过渡仅实际显示6秒 - 因为前3秒没有显示。

有人对如何解决这个问题有任何想法吗？如果我可以保持延迟，我可以使用延迟来忍受。

.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>
    </>
  );
}