React-Three-Fiber 的 Canvas 在 Android 手机上吓坏了

Question

我正在使用 React 创建我的第一个 Web 应用程序，并且我已经使用 React-Three-Fiber 实现了一些 3D 动画。

我已经在 github 页面中部署了该页面，而在桌面上的 Chrome 中，无论是在网页中还是在 localhost 中，网站都可以正常工作完美无瑕（有一些冻结，但这不是重点）。

但是，当我在 Android 手机上访问该页面时，所有 Canvas 都会停止工作并在我滚动时多次显示文本（我真的不知道如何解释发生了什么，所以我会留下这个视频：https://youtube.com/shorts/O0xXEElAjJs?feature=share . 可以看到问题只存在于 Canvas 上，因为 Header 不是 Canvas 元素）。

我试图在 iPhone 上加载该页面，但它甚至没有加载，只是崩溃了。
在我尝试过的两部 Android 手机上，页面在开始时加载良好，但一段时间后它开始像视频中一样出现故障。

我完全不知道发生了什么，除了问题出在我创建的画布上。

我认为这是一件我可能错过的简单事情，但我真的迷路了。

提前致谢！ :D

这是网页：https://pedrochaps.github.io/
这是代码：https://github.com/PedroChaps/pedrochaps.github.io

Answer 1

我仍在寻找解决此问题的方法，我暂时切换到移动尺寸的静态资源。