我用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"
    ]
  }
}

我尝试了：1 -"start_url": ".",//在manifest.json中2 -从文件中删除iframe 3-"homepage": ".",//添加到package.json中4-"start_url": "``https://fitbodyclub.netlify.app/``",//添加到manifest.json中5-"start": "yarn run start:tw & sleep 1 && yarn run start:cra",//添加到package.json中6-<iframe allow="fullscreen"//添加到iframe中7-我开始重建它。我发现文件给出了该问题：

// 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;

我开始重建它。我发现文件给出的问题：