Rive动画网站在iPhone端无法运行的问题排查求助

核心问题分析 #

你的问题大概率出在跨域配置、资源MIME类型或运行时库冲突上，iPhone Safari对这些细节的兼容性要求比Chrome更严格。

1. 移除冲突的Rive运行时库 #

你同时引入了@rive-app/canvas和rive-js两个库，前者是Rive官方推荐的新版Canvas运行时，后者是旧版库，二者会导致上下文冲突，在Safari这类对环境敏感的浏览器中更容易触发问题。

修改后的脚本引入部分：

<!-- 只保留新版Canvas运行时，移除旧版rive-js -->
<script src="https://unpkg.com/@rive-app/canvas@2.10.3"></script>

同时调整初始化代码，使用新版命名空间（新版为Rive而非rive）：

const r = new Rive({
  src: "https://outofourmindsstudios.com/2024/vehicles.riv",
  canvas: document.getElementById("canvas"),
  autoplay: true,
  stateMachines: "bumpy",
  onLoad: () => {
    r.resizeDrawingSurfaceToCanvas();
  },
});

2. 配置服务器CORS响应头 #

自有服务器需要返回允许跨域的响应头，否则Safari会拦截资源请求。需要在服务器上为.riv文件添加以下HTTP响应头：

• Access-Control-Allow-Origin: *（或指定你的网站域名，安全性更高）
• Access-Control-Allow-Methods: GET

3. 修正.riv文件的MIME类型 #

确保服务器为.riv文件设置正确的MIME类型，推荐设置为：
Content-Type: application/octet-stream
或官方指定的application/rive。MIME类型错误会导致Safari无法正确解析资源。

验证步骤 #

1. 先移除旧版rive-js库，仅保留@rive-app/canvas，测试是否修复问题；
2. 若仍失效，检查服务器的CORS配置和MIME类型设置；
3. 可通过浏览器开发者工具的「网络」面板查看.riv资源的响应头，确认上述配置是否生效。

内容的提问来源于stack exchange，提问作者RJ_OOOMS