Веб-сайт React дает пустую страницу в IOS Safari

Я создал одностраничный веб-сайт с помощью React. Хотя он отлично работает на устройствах Android и Windows, я получаю сообщение об ошибке белой страницы на устройствах на базе IOS. Я пробовал много решений. Я также не получаю сообщение об ошибке консоли для Safari (последняя версия) для Windows. Здесь в прямом эфире: 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>
);

пакет.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;

Я начал его восстанавливать. Я обнаружил, что файл дает эту проблему:

🤔 А знаете ли вы, что...
React Router - это библиотека для управления маршрутизацией в приложениях React.