React单页网站在iOS Safari显示空白页问题求助

我开发的React单页网站在Android和Windows设备上运行正常，但在iOS设备上打开会出现白屏错误。已测试Windows平台的最新版Safari，未发现控制台报错。

线上演示地址：https://fitbodyclub.netlify.app/
代码仓库地址：https://github.com/kececibora/FitBodyClub-Website

index.js代码 #

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

package.json配置 #

{
  "name": "fitclub",
  "homepage": "https://fitbodyclub.netlify.app/",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^6.3.15",
    "number-counter": "^1.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-onclickoutside": "^6.12.2",
    "react-scripts": "5.0.1",
    "react-scroll": "^1.8.7",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

已尝试的解决方案 #

• 在manifest.json中设置"start_url": ".",
• 删除文件中的iframe
• 在package.json中添加"homepage": ".",
• 在manifest.json中设置"start_url": "https://fitbodyclub.netlify.app/",
• 在package.json中添加"start": "yarn run start:tw & sleep 1 && yarn run start:cra",
• 给iframe添加<iframe allow="fullscreen"属性

问题定位 #

重新构建项目后，发现问题出在Hero组件中，代码如下：

// import Header from "./Header/Header";
import "./Hero.css";
import hero_image from "../assets/hero_image.png";
import hero_image_back from "../assets/hero_image_back.png";
import Heart from "../assets/heart.png";
import Calories from "../assets/calories.png";

const transition = { type: "spring", duration: 3 };
const mobile = window.innerWidth <= 768 ? true : false;

function Hero() {
  return (
    <div className="hero" id="home">
      <div className="blur hero-blur"></div>
      <div className="left-h">
        {/* <Header /> */}
        {/* slogan */}
        <div className="slogan">
          <div
            initial={{ left: mobile ? "165px" : "238px" }}
            whileInView={{ left: "8px" }}
            transition={{ ...transition, type: "tween" }}
          ></div>
          <span>Sporun Kalbi burada atıyor 💛💛</span>
        </div>
        {/* Büyük Slogan */}
        <div className="hero-text">
          <div>
            <span className="bosluk-text">Hayalinizdeki </span>
            <span>Vücuda</span>
          </div>
          <div>
            <span>Kavuşma Zamanı</span>
          </div>
          <div>
            <span>
              Burada sizlere hayalinizdeki vücuda kavuşmanıza yardım ediyoruz.
              Sen de yapabilirsin!
            </span>
          </div>
        </div>
        {/* Figürler */}
        <div className="figures">
          <div>
            <span>+500</span>
            <span>metrekare</span>
          </div>
          <div>
            <span>+2500</span>
            <span>Üyelik</span>
          </div>
          <div>
            <span>+250</span>
            <span>Ekipman</span>
          </div>
        </div>
        {/*Butonlar  */}
        <div className="hero-buttons">
          <button className="btn">Katıl Bize</button>
          <button className="btn">Daha Fazlası</button>
        </div>
      </div>
      <div className="right-h">
        <button className="btn">Üye Girişi</button>
        <div
          initial={{ right: "-1rem" }}
          whileInView={{ right: "4rem" }}
          transition={transition}
          className="heart-rate"
        >
          <img src={Heart} alt="" />
          <span>Heart Rate</span>
          <span>116bpm</span>
        </div>
        {/* Hero images */}
        <img src={hero_image} alt="" className="hero-image" id="hero_image" />
        <img
          initial={{ right: "11rem" }}
          whileInView={{ right: "20rem" }}
          transition={transition}
          src={hero_image_back}
          alt=""
          className="hero-image-back"
          id="hero_image_back"
        />
        {/* Kalori */}
        <div
          initial={{ right: "37rem" }}
          whileInView={{ right: "28rem" }}
          transition={transition}
          className="calories"
        >
          <img src={Calories} alt="" />
          <div>
            <span>Kalori</span>
            <span>220 kcal</span>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Hero;

内容的提问来源于stack exchange，提问作者Bora Keçeci